使用香草JS获取滚动位置和方向

Get scroll position and direction with vanilla JS

本文关键字：位置 方向 滚动 获取 香草 JS      更新时间：2023-09-26

我试图在不使用jQuery的情况下完成一个项目。直到现在看起来还不错。但是，有些事情我无法控制：滚动位置和方向。

我基本上想要的是，当我们向下到达某个点时，向元素中添加一个类，当我们到达同一点时，删除该类，但是，向上。

您将想要使用

var scrollObject = {};
window.onscroll = getScrollPosition;
function getScrollPosition(){
    scrollObject = {
       x: window.pageXOffset,
       y: window.pageYOffset
    }
    // If you want to check distance
    if(scrollObject.y > 200) {
        // add class
    } else {
        // remove class
    }
}

也就是说，我强烈建议研究一种节流方法来提高这种方法的性能。

我最近创建了一个JSFiddle，它可能会帮助您完成这项工作。http://jsfiddle.net/UFV7R/5/你必须包括滚动位置的检测，你可以通过存储最后一个滚动条位置并将其与当前位置进行比较来实现这一点。

相关文章：