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条件变为returnfalse。所以，我只是将条件更改为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。

Div 滚动结束检测不一致

Div onscroll end detection not working consistently

javascript

infinite-scroll

reactjs