在某些设备上快速滚动时，滚动到底部无法正确检测

Question

我一直在尝试使用纯JavaScript函数检测页面底部位置的滚动位置。 在所有台式机浏览器和Andriod IOS设备上都可以正常工作。 但是当我快速滚动时，它无法正确检测某些设备上的页面底部。（例如：Samsung galaxy s9）

trackScrolling = () => {
 let scrolledTop = 0;
 if (document.documentElement) {
   scrolledTop = document.documentElement.scrollTop;
 } else if (document.body) {
   scrolledTop = document.body.scrollTop;
 }

 let scrollableHeight;
 if (document.documentElement) {
   scrollableHeight = document.documentElement.scrollHeight;
 } else if (document.body) {
   scrollableHeight = document.body.scrollHeight;
 }

 // 1000 is just a number which is greater than 0.
 const diffToBottom = scrollableHeight ? scrollableHeight - (scrolledTop + window.innerHeight) : 1000;
 if (diffToBottom <= 0) {
  this.props.doLoadMore();
 }
}

在Galaxy S9中，diffToBottom值约为55 px。 但是，如果我缓慢滚动，则为0。有人对此有想法吗？

Answer 1

找到了问题。 问题不在于偏移量。 处理滚动事件时，我们需要添加超时。 否则，浏览器将排队一些滚动并丢失一些滚动事件。 这就是为什么缓慢滚动时它可以工作的原因。 解决方法是增加200毫秒的超时时间。