面试题：JavaScript 中获取文档滚动位置的方法及应用

获取文档垂直和水平滚动位置的常用方法

window.pageXOffset 和 window.pageYOffset：
- 这两个属性可以获取文档在水平和垂直方向上的滚动距离。window.pageXOffset 表示水平滚动距离，window.pageYOffset 表示垂直滚动距离。
- 兼容性方面，IE9 及以上浏览器支持，现代浏览器都支持。
document.documentElement.scrollLeft 和 document.documentElement.scrollTop：
- 在标准模式下，document.documentElement.scrollLeft 获取水平滚动距离，document.documentElement.scrollTop 获取垂直滚动距离。
- 适用于大部分现代浏览器。
document.body.scrollLeft 和 document.body.scrollTop：
- 在怪异模式（quirks mode）下，可以通过 document.body.scrollLeft 和 document.body.scrollTop 获取滚动距离。
- 现在使用较少，因为现代网页大多采用标准模式。

示例：当页面垂直滚动到一定距离时，某个元素显示或隐藏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Example</title>
    <style>
        #target {
            display: none;
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="target">This is a target element</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit
        amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a,
        semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum
        diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque
        congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
        Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque
        fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
    <script>
        window.addEventListener('scroll', function () {
            const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            const targetElement = document.getElementById('target');
            if (scrollY > 100) {
                targetElement.style.display = 'block';
            } else {
                targetElement.style.display = 'none';
            }
        });
    </script>
</body>

</html>

在上述代码中，通过 window.addEventListener('scroll', callback) 监听滚动事件，在回调函数中获取当前垂直滚动距离 scrollY，当 scrollY 大于 100 像素时，显示 id 为 target 的元素，否则隐藏该元素。

星途面试题库

面试题：JavaScript 中获取文档滚动位置的方法及应用

知识考点

面试题答案

获取文档垂直和水平滚动位置的常用方法

示例：当页面垂直滚动到一定距离时，某个元素显示或隐藏