Question

我发现我的无限滚动实现在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);

有人可以帮我找到一个发现吗？创建一个新的布尔值，如果用户在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中，如果我使窗口更窄，但无限滚动似乎效果更好，尽管仍然不一致。不知道为什么...

Answer 1

在上面的评论帮助下修复了此问题。在记录了变量的值之后，Mozilla的scrollY值似乎比应有的值小了0.5。要解决此问题，我只向滚动Y值添加了.5，以便在底部时将const bottomOfPage = visible + scrollY >= pageHeight设置为true。

Infinite Scroll无法在Firefox上运行，但可以在Safari / Chrome上运行

1 个答案: