Question

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

除非我向相反的方向滚动，否则有没有办法让它只发射一次？

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);
});
});

这是小提琴。 https://jsfiddle.net/ramansharma89/9sdkyhss/

Answer 1

默认情况下，每次滚动时都会触发.scroll事件。但是如果要停止重复.addClass .removeClass，你不能只测试_direction变量吗？

EG：

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

通过by，如果你想在每次滚动时停止滚动事件触发事件，你可以使用waitForFinalEvent函数，如下所示：

var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
    if (!uniqueId) {
        uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
        clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
    };
})();

并像这样使用它：

$(window).scroll(function() {
    waitForFinalEvent(function(){ // fire event when scroll has finished only
        resizeChecksDelayed();
    }, 500, "all page scripts");
    // Do some stuff in here once I've stopped.
});

Answer 2

检查您是否已经进行了班级变更

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);
});
});

Answer 3

你可以在dom操作之前使用延迟和一些检查：

'https://jsfiddle.net/9sdkyhss/1/'

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

3 个答案: