JS 监听页面滚动|极客笔记

JS 监听页面滚动

在Web开发中，我们经常需要监听用户在页面上的滚动行为。通过监听页面滚动，我们可以实现一些视觉效果、动画效果或者触发特定的操作。本文将详细讨论如何使用JavaScript来监听页面滚动。

基础知识

在探讨如何监听页面滚动之前，我们需要了解一些基本知识。

`window` 对象

window 对象表示浏览器中打开的窗口。在浏览器环境中，window 对象是全局对象，我们可以通过window对象来访问当前窗口的各种属性和方法。

`scroll` 事件

浏览器中的滚动行为会触发scroll事件。当页面滚动时，浏览器会触发scroll事件，我们可以通过监听该事件来响应用户的滚动行为。

`scrollTop` 属性

scrollTop属性表示元素的内容顶部到其视口顶部的距离。在window对象中，scrollTop属性表示文档的垂直滚动距离。

监听页面滚动

方式一：通过`addEventListener`方法监听

我们可以通过addEventListener方法来监听scroll事件，实现对页面滚动的监听。

window.addEventListener('scroll', function() {
    console.log('页面被滚动了');
});

上面的代码通过addEventListener方法监听了scroll事件，当页面被滚动时，会在控制台输出页面被滚动了。

方式二：使用`onscroll`属性

除了使用addEventListener方法外，我们还可以直接通过onscroll属性来监听页面滚动。

window.onscroll = function() {
    console.log('页面被滚动了');
};

上面的代码通过onscroll属性监听了页面滚动事件，同样会在控制台输出页面被滚动了。

获取滚动距离

我们可以通过scrollTop属性来获取页面的滚动距离，从而实现一些特定的效果。下面是一个示例，当页面向下滚动超过100px时，在控制台输出页面已经滚动超过100px。

window.addEventListener('scroll', function() {
    if (window.scrollY > 100) {
        console.log('页面已经滚动超过100px');
    }
});

应用示例

固定导航栏效果

通过监听页面滚动，我们可以实现固定导航栏的效果。当用户向下滚动页面时，将导航栏固定在页面顶部，提高用户体验。

window.addEventListener('scroll', function() {
    var nav = document.getElementById('nav');
    if (window.scrollY > nav.offsetTop) {
        nav.style.position = 'fixed';
        nav.style.top = '0';
    } else {
        nav.style.position = 'static';
    }
});

上面的代码实现了一个简单的固定导航栏效果。当用户滚动页面时，如果滚动距离大于导航栏距离文档顶部的距离时，将导航栏固定在页面顶部。

懒加载图片效果

另一个常见的应用是懒加载图片效果。当用户滚动页面时，延迟加载页面中的图片，提高页面加载性能。

window.addEventListener('scroll', function() {
    var images = document.querySelectorAll('img[data-src]');
    for (var i = 0; i < images.length; i++) {
        if (images[i].offsetTop < window.innerHeight + window.scrollY) {
            images[i].src = images[i].getAttribute('data-src');
            images[i].removeAttribute('data-src');
        }
    }
});

上面的代码实现了一个简单的懒加载图片效果。当用户滚动页面时，如果图片进入可视区域，将图片的data-src属性赋值给src属性，实现延迟加载效果。