检查用户是否在亚像素精度时代滚动到底部

Question

我找到了经典的MDN公式来检查内容是否已滚动到底部，

element.scrollHeight - element.scrollTop === element.clientHeight

不再适用于所有情况。例如，如果你在MDN上的演示页面将内容的比例更改为大于100%的比例，你将无法得到正确的结果。发生这种情况是因为现在浏览器对元素使用子像素精度。特别是scrollTop不是 100% 的比例现在是一个分数值。实际上，问题的发生是由于上述公式中的===符号。

那么，最简单但仍然可靠的解决方案是什么？

Answer 1

我当前的解决方案：

function isContentScrolledToBottom(element) {
    const rest = element.scrollHeight - element.scrollTop;
    return Math.abs(element.clientHeight - rest) < 1;
}

它检查元素是否以 ±1 的精度滚动到底部。

Answer 2

每当滚动时都会触发此函数，然后您可以执行要执行的操作。

  window.onscroll = function() {scrolled()};
  function scrolled() {
    fixed = document.body.scrollTop > 20 ||
    document.documentElement.scrollTop > 20 ?
      "Am Going Down" : "Am Going Up"
  }