时间戳

首页 > 解决方案 > 使用 JS 的无限滚动无法在 Chrome 浏览器上运行 - PURE JS

javascript - 使用 JS 的无限滚动无法在 Chrome 浏览器上运行 - PURE JS

问题描述

我正在开发一个使用 firebase 作为后端的博客网站。

这是我网站的链接 - https://www.zealforgood.com

我正在使用此函数来检测用户何时到达页面末尾并获取并加载下一个项目：

//to get next RightSidebar blocks
window.onscroll = function (ev) {
  if (loading) return;
  if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
    document.querySelector('.load-next').classList.remove('uk-invisible');
    //getting category blocks
    loading = true;
    db.collection("articles").startAfter(lastVisible).limit(5).get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {

          let template = `
            some template
            `
          rightSidebar.innerHTML += template;
          document.querySelector('.load-next').classList.add('uk-invisible');
        });
        lastVisible = snapshot.docs[snapshot.docs.length - 1];
        loading = false;
      })
      .catch((error) => {
        console.log("Error getting documents: ", error);
      });
  };
};

您可以line 74在 www.zealforgood.com/js/index.min.js找到此代码

我在https://www.zealforgood.com/category.html和整个网站的所有其他页面上遇到了同样的问题，我已经实现了无限滚动。

该代码在 MICROSOFT EDGE 浏览器中有效，但在 chrome 中无效

请有人帮我解决我做错的事情

另外，我是一名新手开发人员，只懂 HTML、JS 和 CSS 等基本语言。所以请帮我用纯 Javascript 解决方案，因为我不熟悉 jQuery。

标签： javascriptfirebasegoogle-chromegoogle-cloud-firestoreinfinite-scroll

解决方案

推荐阅读