[英]Scroll Function Firing Multiple Times Instead of Once
我正在嘗試創建一個網站,通過一個滾動操作即可自動滾動到每個部分。 這意味着代碼必須檢查頁面是向上滾動還是向下滾動。 我相信下面的代碼可以解決我的問題,但是在滾動頁面時,滾動動作被觸發了多次。 您將看到if語句中的第一個警報達到5而不是所需的1。對此事的任何幫助將不勝感激。
[注意]我正在使用velocity.js庫滾動到容器中的每個部分。
var page = $("#content-container");
var home = $("#home-layer-bottom");
var musicians = $("#musicians");
var athletes = $("#athletes");
var politics = $("#politics");
var bio = $("#politics");
var pages = [ home,musicians,athletes,politics,bio ];
var pageCur = 0;
var lastScrollTop = 0;
page.scroll(function(){
var st = $(this).scrollTop();
var pageNex = pageCur + 1;
if (st > lastScrollTop){
alert(pageNex);
pages[pageNex].velocity("scroll", { container: $("#content-container") });
} else {
alert(pageCur-1);
pages[pageCur-1].velocity("scroll", { container: $("#content-container") });
}
lastScrollTop = st;
pageCur = pageNex;
});
用戶執行此操作時,滾動事件(以及調整大小事件)會多次觸發。 為此,最佳做法是消除抖動 。 但是,我從來沒有使它起作用。 相反,我使用一個全局布爾值來檢查該函數是否已觸發。
var scrolled = false;
page.on('scroll', function(){
if(!scrolled){
scrolled = true;
//do stuff that should take a while...
scrolled = false;
};
});
這對我有用!
var ScrollDebounce = true;
$('.class').on('scroll',
function () {
if (ScrollDebounce) {
ScrollDebounce = false;
//do stuff
setTimeout(function () { ScrollDebounce = true; }, 500);
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.