窗口事件-scroll事件-页面滚动事件的处理-前端-Javascript-书闪BookChips

128 - 窗口事件 - scroll 事件 - 页面滚动事件的处理

作者：

贺及楼

成为作者

更新日期：2025-02-21 20:00:29

窗口事件 - scroll 事件 - 页面滚动事件的处理

一、scroll 事件简介

在前端开发中，scroll 事件是一个非常实用的窗口事件，它会在元素的滚动位置发生变化时触发。这个事件可以应用于 window 对象、document 对象或者任何具有滚动条的元素。通过监听 scroll 事件，我们可以实现很多有趣和实用的功能，比如懒加载、吸顶菜单、滚动动画等。

二、监听 scroll 事件的方法

1. 使用 addEventListener 方法

这是最常用的监听事件的方式，它可以为元素添加一个事件监听器。以下是一个监听 window 对象 scroll 事件的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body style="height: 2000px;">
    <script>
        window.addEventListener('scroll', function () {
            console.log('页面正在滚动');
        });
    </script>
</body>
</html>

在这个例子中，当用户滚动页面时，控制台会输出“页面正在滚动”。

2. 直接在 HTML 元素上绑定事件

我们也可以直接在 HTML 元素上使用 onscroll 属性来绑定事件。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body style="height: 2000px;" onscroll="console.log('页面正在滚动')">
</body>
</html>

不过这种方式不太推荐，因为它会将 HTML 和 JavaScript 代码混合在一起，不利于代码的维护。

三、获取滚动位置信息

在处理 scroll 事件时，我们经常需要获取当前的滚动位置信息。对于 window 对象，我们可以使用 window.scrollX 和 window.scrollY 来分别获取水平和垂直方向的滚动距离。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body style="height: 2000px;">
    <div id="scrollInfo"></div>
    <script>
        const scrollInfo = document.getElementById('scrollInfo');
        window.addEventListener('scroll', function () {
            const x = window.scrollX;
            const y = window.scrollY;
            scrollInfo.textContent = `水平滚动距离: ${x}px，垂直滚动距离: ${y}px`;
        });
    </script>
</body>
</html>

在这个例子中，页面上会实时显示当前的水平和垂直滚动距离。

四、scroll 事件的实用案例

1. 懒加载图片

懒加载是一种优化网页性能的技术，它会在图片进入浏览器视口时才加载图片，从而减少页面的初始加载时间。以下是一个简单的懒加载图片的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        img {
            display: block;
            margin-bottom: 20px;
        }
    </style>
</head>
<body style="height: 2000px;">
    <img data-src="https://via.placeholder.com/300" class="lazyload">
    <img data-src="https://via.placeholder.com/300" class="lazyload">
    <img data-src="https://via.placeholder.com/300" class="lazyload">
    <script>
        const lazyImages = document.querySelectorAll('.lazyload');
        function lazyLoad() {
            lazyImages.forEach(image => {
                if (image.getBoundingClientRect().top < window.innerHeight) {
                    image.src = image.dataset.src;
                    image.classList.remove('lazyload');
                }
            });
        }
        window.addEventListener('scroll', lazyLoad);
        lazyLoad(); // 初始加载
    </script>
</body>
</html>

在这个例子中，图片的真实 src 地址存储在 data-src 属性中，当图片进入视口时，将 data-src 的值赋给 src 属性，从而实现图片的加载。

2. 吸顶菜单

吸顶菜单是指当页面滚动到一定位置时，菜单会固定在页面顶部。以下是一个简单的吸顶菜单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #menu {
            background-color: #333;
            color: white;
            padding: 10px;
            position: relative;
        }
       .sticky {
            position: fixed;
            top: 0;
            width: 100%;
        }
    </style>
</head>
<body style="height: 2000px;">
    <div id="menu">菜单</div>
    <script>
        const menu = document.getElementById('menu');
        const menuOffsetTop = menu.offsetTop;
        window.addEventListener('scroll', function () {
            if (window.scrollY >= menuOffsetTop) {
                menu.classList.add('sticky');
            } else {
                menu.classList.remove('sticky');
            }
        });
    </script>
</body>
</html>

在这个例子中，当页面滚动到菜单的初始位置时，给菜单添加 sticky 类，使其固定在页面顶部。

五、性能优化

由于 scroll 事件会在滚动过程中频繁触发，可能会导致性能问题。为了避免这种情况，我们可以使用节流（throttle）或防抖（debounce）技术。

1. 节流

节流是指在一定时间内，只执行一次事件处理函数。以下是一个简单的节流函数示例：

function throttle(func, delay) {
    let timer = null;
    return function () {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        }
    };
}
window.addEventListener('scroll', throttle(function () {
    console.log('页面正在滚动');
}, 200));

在这个例子中，throttle 函数会限制 scroll 事件处理函数的执行频率，每 200 毫秒最多执行一次。

2. 防抖

防抖是指在一定时间内，如果事件再次触发，则重新计时，直到一定时间内没有再次触发事件，才执行事件处理函数。以下是一个简单的防抖函数示例：

function debounce(func, delay) {
    let timer = null;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, arguments);
        }, delay);
    };
}
window.addEventListener('scroll', debounce(function () {
    console.log('页面滚动停止');
}, 200));

在这个例子中，debounce 函数会在用户停止滚动 200 毫秒后才执行事件处理函数。

六、总结

要点	详情
事件监听方法	使用 `addEventListener` 或直接在 HTML 元素上绑定 `onscroll` 属性
获取滚动位置	使用 `window.scrollX` 和 `window.scrollY`
实用案例	懒加载图片、吸顶菜单等
性能优化	节流和防抖技术

scroll 事件在前端开发中有着广泛的应用，通过合理地使用它，我们可以为用户带来更好的交互体验。同时，要注意性能优化，避免因事件频繁触发而导致的性能问题。