无限滚动不适用于 Firefox，但适用于 Safari/Chrome答案

【问题标题】：Infinite Scroll not working on Firefox, but works on Safari/Chrome无限滚动不适用于 Firefox，但适用于 Safari/Chrome
【发布时间】：2019-07-13 10:06:36
【问题描述】：

我发现我的无限滚动实现在 Firefox 上不起作用，但在 Safari 和 Chrome 上却可以。（我正在使用 Vue.js，问题是我无法弄清楚如何设计一个布尔表达式来辨别用户是否滚动到了在 Firefox 上工作的窗口底部。这是脚本中的方法部分主组件.vue文件区域：

 methods: {
    bottomVisible() {
      /**
       * This solution doesn't work for firefox
       */
      const scrollY = window.scrollY
      const visible = document.documentElement.clientHeight
      const pageHeight = document.documentElement.scrollHeight
      const bottomOfPage = visible + scrollY >= pageHeight
      console.log(bottomOfPage || pageHeight < visible);
      return bottomOfPage || pageHeight < visible;
    },
    addMoreCards() {
      this.$store.dispatch(
        "increaseMultiplier",
        this.$store.state.cardToShowMultiplier + 1
      );
    }
  },
  watch: {
    bottom(bottom) {
      if (bottom) {
        this.addMoreCards();
      }
    }
  },
  created() {
    window.addEventListener("scroll", () => {
      this.bottom = this.bottomVisible();
    });
  }
};

最大的问题是当我在 Firefox 中检查控制台时，这行永远不会打印 True:console.log(bottomOfPage || pageHeight < visible);

谁能帮我找到一个 find 创建一个新的布尔值，如果用户在 Firefox、Safari 和 Chrome 上滚动到页面底部，它将返回 True，允许我在用户滚动到页面底部时调用函数addMoreCards()？我当然不是前端开发人员，所以我真的可以使用你们的帮助！

以下是一些可能有用的其他花絮：

有时，在 FireFox 中，滚动到页面底部会导致 bottomVisible() 按预期返回 True。但是，它不会始终如一地工作。当它发生时，我确实在控制台中收到此警告：

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

在 Firefox 中，如果我使窗口更窄，无限滚动似乎效果更好，但仍不一致。不知道为什么...

【问题讨论】：

您能记录visible、scrollY 和pageHeight 的值吗？这可能会解释发生了什么。（另外，我会在页面底部的元素上使用intersection observer 来执行此操作，该元素也是手动“加载更多”链接。）

标签： javascript html vue.js scroll infinite-scroll

【解决方案1】：

在上面评论的帮助下修复了它。记录变量的值后，Mozilla 的 scrollY 值似乎比应有的值小 0.5。为了解决这个问题，我简单地将 .5 添加到 scrollY 值，这样const bottomOfPage = visible + scrollY >= pageHeight 在底部时将设置为true。

【讨论】：