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

时间:2019-03-29 14:37:29

标签: javascript dom

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

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

不再适用于所有情况。例如,如果将demo page on MDN的内容比例更改为大于100%的比例,您将不会获得正确的结果。发生这种情况是因为现在浏览器在元素上使用subpixel precision。特别是scrollTop的比例值现在不是100%。实际上,问题是由于上面公式中的===符号引起的。

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

1 个答案:

答案 0 :(得分:0)

我当前的解决方案:

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

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