Div onscroll 结束检测无法始终如一地工作

Question

我在 React.js 中有一个简单的无限滚动实现。 我正在使用event.target.scrollHeight来检测 div 的结尾。 但它不能在浏览器中始终如一地工作。 例如，当我将 div 的高度设为 30vh 时，它在 chrome 中工作，但在 firefox 中不起作用。 如果我把它设为 35vh，它可以在 firefox 中工作，但不能在 chrome 中工作。

我知道我也可以使用引用标记方法，但是这种方法有什么问题。

完整代码： https://codesandbox.io/s/simple-infinite-scroll-vei7g代码文件：demo.js

Answer 1

是你的情况有问题。 我从控制台注意到的是firefox给出的值等于(e.target.scrollHeight - e.target.scrollTop) - 1 。 这使得e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight条件返回false 。 所以，我只是将条件更改为e.target.scrollHeight <= e.target.scrollTop + e.target.clientHeight 。 它在两种浏览器中都能正常工作。

  const isScrolling = e => {
    const tData =
    e.target.scrollHeight <= e.target.scrollTop + e.target.clientHeight;
    console.log("scrolling.....", divHeight, tData);

    if (tData) {
      fetchMoreListItems();
    }
  };

同样使用ref 。

  const isScrolling = () => {
    const tData =
      scrollCont.current.scrollTop + scrollCont.current.clientHeight >=
      scrollCont.current.scrollHeight;
    console.log("scrolling.....", divHeight, tData);
    if (tData) {
      fetchMoreListItems();
    }
  };

这是使用ref实现的codepen 。