Div滚动滚动末端检测无法正常工作

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实现了相同的操作。这是codepen。

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