防止。滾動事件從每次我滾動相同的方向時，除非另有規定

我有一個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); 
}); 
});

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

來源

2016-09-02 Raman Sharma

http://ejohn.org/blog/learning-from-twitter/ ，https://css-tricks.com/the-difference-between-throttling-and-debouncing/，https://css-tricks.com/debouncing-throttling-explained-examples/ – CBroe

只要檢查你是否已經操作類更改

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

來源

2016-09-02 12:55:51 Paolo

是否有可能顯示這在我的例子？我不是一個編碼器。謝謝。 –

剛剛完成...... – Paolo

非常感謝。我非常感謝爲此節省時間。 :) –

默認情況下，每次滾動時會觸發.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); 
}); 
});

順便提一下，如果你想停止滾動事件每次滾動一次射擊的東西，你可以使用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. 
});

來源

2016-09-02 12:32:08

-1

您可以使用延遲和一些檢查DOM操作前：

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

來源

2016-09-02 13:00:31

防止。滾動事件從每次我滾動相同的方向時，除非另有規定

回答

相關問題