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

Question

我发现经典 MDN检查内容是否已滚动到底部的公式

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

不再适用于所有情况 .例如，如果您将 demo page on MDN 的内容比例更改为大于 100% 的值。你不会得到正确的结果。发生这种情况是因为现在浏览器使用 subpixel precision关于元素。特别 scrollTop因为现在不是 100% 的比例是分数值。实际上问题的发生是因为 === checkin 上面的公式。

因此，需要最简单但仍然可靠的解决方案。

Answer 1

我目前的解决方案:

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

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