Div 滚动端检测无法始终如一地工作

Question

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

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

完整代码 ： https://codesandbox.io/s/simple-infinite-scroll-vei7g 代码文件：演示.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实现的代码笔。