js 滚动事件

// 监听滚动事件的示例代码

// 1. 使用 window.addEventListener 来监听整个页面的滚动事件
window.addEventListener('scroll', function() {
    // 获取当前页面垂直方向的滚动距离
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // 输出滚动距离到控制台
    console.log('当前滚动距离:', scrollTop);

    // 根据滚动距离执行不同的操作
    if (scrollTop > 100) {
        console.log('已经滚动超过100px');
    }
});

// 2. 使用 onscroll 属性直接为 window 绑定滚动事件
window.onscroll = function() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    console.log('当前滚动距离 (onscroll):', scrollTop);
};

// 3. 监听某个特定元素的滚动事件
let scrollableElement = document.querySelector('.scrollable');

if (scrollableElement) {
    scrollableElement.addEventListener('scroll', function() {
        let scrollTop = scrollableElement.scrollTop;
        console.log('元素内部滚动距离:', scrollTop);
    });
}

解释说明：

• window.addEventListener('scroll', callback)：这是最常用的监听滚动事件的方式，适用于监听整个页面的滚动。callback 是一个函数，当页面滚动时会被触发。

• window.onscroll = callback：另一种绑定滚动事件的方式，直接为 window 对象设置 onscroll 属性。这种方式虽然简单，但不推荐频繁使用，因为它会覆盖之前的 onscroll 处理程序。

• element.addEventListener('scroll', callback)：可以用于监听特定 DOM 元素的滚动事件，比如带有滚动条的 div 或其他容器元素。