js 判断上下滚动的像素点

在JavaScript中，判断页面的上下滚动像素点可以通过监听window对象的scroll事件来实现。以下是基础概念以及如何实现的具体步骤：

基础概念

• 滚动事件：当用户滚动页面时触发的事件。
• scrollTop：元素的内容垂直滚动的像素数。

实现步骤

1. 监听滚动事件：使用window.addEventListener来监听滚动事件。
2. 获取滚动位置：在滚动事件的回调函数中，使用window.pageYOffset或document.documentElement.scrollTop来获取当前的滚动位置。
3. 计算滚动差值：通过保存上一次的滚动位置，计算出本次滚动的像素点数。

示例代码

let lastScrollTop = 0;

window.addEventListener('scroll', function() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    let scrollDiff = scrollTop - lastScrollTop;

    if (scrollDiff > 0) {
        console.log('向下滚动', scrollDiff);
    } else {
        console.log('向上滚动', Math.abs(scrollDiff));
    }

    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
});

应用场景

• 无限滚动加载：当用户向下滚动到页面底部时，自动加载更多内容。
• 导航栏固定：当用户向下滚动一定距离后，将导航栏固定在页面顶部。
• 回到顶部按钮：当用户滚动到一定位置时，显示一个“回到顶部”的按钮。

注意事项

• 性能问题：频繁触发scroll事件可能会导致性能问题，可以使用节流（throttle）或防抖（debounce）技术来优化。
• 兼容性：window.pageYOffset在所有现代浏览器中都支持，但为了兼容旧版IE，可以使用document.documentElement.scrollTop作为备选。

通过上述方法，可以有效地判断页面的上下滚动像素点，并根据这些信息实现各种交互效果。