'惰性滾動'是否存在？

有沒有辦法在一段時間後執行一個函數？

我想寫一個先進scrollspy腳本我的網站，我一直在想的是執行不立即但一段時間後onScroll行動。如果用戶滾動快，許多停，我想scrollspy只在停止刷新導航鏈接，如果用戶滾動緩慢（也許不停止）我想scrollspy刷新導航鏈接每0.6秒例如。

不幸的是，我不知道從哪裏開始。

我想升級此代碼：

var lastId, 
    topMenu = jQuery(".a1-nav"), 
    topMenuHeight = document.querySelector('header .top-header').offsetHeight; 
    menuItems = topMenu.find("a"), 
    scrollItems = menuItems.map(function(){ 
     var item = jQuery(jQuery(this).attr("href")); 
     if (item.length) { return item; } 
    }); 

menuItems.click(function(e){ 
    var href = jQuery(this).attr("href"), 
     offsetTop = href === "#" ? 0 : jQuery(href).offset().top-topMenuHeight+1; 
    jQuery('html, body').stop().animate({ 
     scrollTop: offsetTop 
    }, 300); 
    e.preventDefault(); 
}); 

jQuery(window).scroll(function(){ 
    var fromTop = jQuery(this).scrollTop()+topMenuHeight; 

    var cur = scrollItems.map(function(){ 
    if (jQuery(this).offset().top < fromTop) 
     return this; 
    }); 

    cur = cur[cur.length-1]; 
    var id = cur && cur.length ? cur[0].id : ""; 

    if (lastId !== id) { 
     lastId = id; 
     // Set/remove active class 
    console.log(id); 
     menuItems 
     .removeClass("active") 
     .filter("[href=#"+id+"]").addClass("active"); 
    }     
});

來源

2015-02-10 lucifer63

聽起來像是你想有一個去抖插件或一些修改後的版本。 – Timmerz 2015-02-10 00:52:26

嗯，我會做的方式是一樣的東西：

var debounce; 
var interval; 
$(window).on('scroll', function() { 
    if (typeof debounce != "undefined") { 
     clearTimeout(debounce); 
    } else if (typeof interval == "undefined" { 
     interval = setInterval(update, 500); 
    } 
    debounce = setTimeout(function() { 
     interval = clearInterval(interval); 
    }, 1000); 
}); 
var update = function() { 
    //your scroll code here 
}

這使得它如此，當他們已經開始滾動，我們每半秒運行一次「更新」，一旦他們停止滾動一秒鐘，我們就清除間隔。由於我們知道它們停止滾動後至少運行了一次，因此無需再次運行它。

來源

2015-02-10 00:50:02 dave

'惰性滾動'是否存在？

回答

相關問題