jquery - 除非另有说明，否则每次我向同一方向滚动时都会阻止 .scroll 事件触发

Question

我有一个 jquery 代码，当我向上/向下滚动页面时，它会更改我的 css 类。这解决了我的目的，但每次我滚动页面时它都会触发事件，我担心这可能会影响网站性能。

那么有什么办法让它只触发一次，除非我向相反方向滚动？

PS:由于某些原因我不想使用鼠标滚轮功能。只是想改进这段代码。我也不太擅长编码，所以简单的语言将受到赞赏。 :)

这是我的 jquery 代码:

$(function(){
var _top = $(window).scrollTop();
var _direction;
$(window).scroll(function(){
    var _cur_top = $(window).scrollTop();
    if(_top < _cur_top)
    {
        _direction = 'down';
        $("#my_div").removeClass("up").addClass("down");
    }
    else
    {
        _direction = 'up';
        $("#my_div").removeClass("down").addClass("up");
    }
    _top = _cur_top;
    console.log(_direction);
});
});

这是 fiddle 。 https://jsfiddle.net/ramansharma89/9sdkyhss/

Answer 1

只需检查您是否已经操作过类(class)更改

if(_top < _cur_top && _direction !== "down")
{
    // [...]
}
else if(_top >= _cur_top && _direction !== "up")
{
    // [...]
}

这将使回调变得轻量级，即使重复触发滚动事件，性能也不会受到影响。

你的整个代码片段变成:

$(function(){
var _top = $(window).scrollTop();
var _direction = "";
$(window).scroll(function(){
    var _cur_top = $(window).scrollTop();
    if(_top < _cur_top && _direction !== "down")
    {
        _direction = 'down';
        $("#my_div").removeClass("up").addClass("down");
    }
    else if(_top >= _cur_top && _direction !== "up")
    {
        _direction = 'up';
        $("#my_div").removeClass("down").addClass("up");
    }
    _top = _cur_top;
    console.log(_direction);
});
});