我在 React.js 中有一个无限滚动的简单实现。我正在使用 event.target.scrollHeight 来检测 div 的结尾。 但它在不同浏览器上的工作效果不一致。 例如,当我将 div 的高度设置为 30vh 时,它在 Chrome 中有效,但在 Firefox 中无效。 如果我将其设置为 35vh,它可以在 Firefox 中运行,但不能在 Chrome 中运行。
我知道我也可以使用引用标签方法,但是这种方法有什么问题。
完整代码:https://codesandbox.io/s/simple-infinite-scroll-vei7g 代码文件:demo.js
最佳答案
这是你的 body 状况的问题。我从控制台注意到的是 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();
}
};
这是codepen它使用 ref
实现。
关于javascript - Div 滚动结束检测无法一致工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58298894/