正文

掌握JS，轻松获取屏幕滚动高度：快速上手技巧与实战案例

/0 浏览量
0527

在Web开发中，获取屏幕滚动高度是一个常见的需求。无论是制作滑动效果、实现无限滚动，还是检测用户滚动行为，滚动高度都是一个重要的参数。今天，我们就来聊聊如何使用JavaScript轻松获取屏幕滚动高度，并提供一些实战案例。

基础知识：获取滚动高度的方法

在JavaScript中，获取屏幕滚动高度主要有以下几种方法：

1. window.pageYOffset

window.pageYOffset 是一个只读属性，它返回当前页面相对于视口顶部垂直滚动的像素数。简单来说，就是从浏览器窗口顶部到页面顶部的距离。

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

2. document.documentElement.scrollTop

document.documentElement.scrollTop 与 window.pageYOffset 类似，它返回当前页面相对于视口顶部垂直滚动的像素数。

3. document.body.scrollTop

document.body.scrollTop 返回当前页面相对于视口顶部垂直滚动的像素数，但它只针对 body 元素。

实战案例：制作滑动效果

以下是一个简单的滑动效果示例，当用户滚动页面时，会显示当前滚动高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动效果</title>
    <style>
        body {
            height: 2000px;
        }
        .scroll-height {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="scroll-height">当前滚动高度：0px</div>
    <script>
        window.addEventListener('scroll', function () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            document.querySelector('.scroll-height').textContent = '当前滚动高度：' + scrollTop + 'px';
        });
    </script>
</body>
</html>

实战案例：实现无限滚动

以下是一个简单的无限滚动示例，当用户滚动到页面底部时，会自动加载更多内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无限滚动</title>
    <style>
        .content {
            height: 2000px;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div class="content"></div>
    <script>
        var content = document.querySelector('.content');
        var loaded = 0;
        var loadMore = function () {
            for (var i = 0; i < 10; i++) {
                var div = document.createElement('div');
                div.style.height = '100px';
                div.style.border = '1px solid #000';
                content.appendChild(div);
            }
            loaded += 10;
        };

        window.addEventListener('scroll', function () {
            if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
                loadMore();
            }
        });
    </script>
</body>
</html>

总结

通过本文，我们了解了获取屏幕滚动高度的方法，并通过两个实战案例展示了如何在实际项目中应用。希望这些内容能帮助你在Web开发中更加得心应手。

-- 展开阅读全文 --