面试题：JavaScript中如何检测文档滚动到顶部或底部边界

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div style="height: 2000px;"></div>
    <script>
        window.addEventListener('scroll', function () {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const clientHeight = document.documentElement.clientHeight;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

            if (scrollTop === 0) {
                console.log('滚动到顶部');
            }

            if (scrollTop + clientHeight === scrollHeight) {
                console.log('滚动到底部');
            }
        });
    </script>
</body>

</html>

使用到的属性和方法

window.addEventListener：用于给window对象添加事件监听器，这里监听scroll事件，当页面滚动时触发回调函数。
document.documentElement.scrollTop 和 document.body.scrollTop：这两个属性用于获取页面滚动条距离顶部的位置。在不同浏览器中，scrollTop可能会挂载在document.documentElement 或者 document.body上，所以通过 || 运算符来兼容不同浏览器。
document.documentElement.clientHeight：获取视口的高度，即浏览器窗口中可见区域的高度。
document.documentElement.scrollHeight 和 document.body.scrollHeight：获取整个文档的高度，同样通过 || 运算符来兼容不同浏览器。通过比较 scrollTop + clientHeight 与 scrollHeight 是否相等，来判断是否滚动到了底部。

面试题：JavaScript中如何检测文档滚动到顶部或底部边界

知识考点

面试题答案

使用到的属性和方法