從排隊停止滾動功能

我創建了一個帶有JavaScript的滾動系統，用於我正在處理的網站，並且在排隊所有輸入時遇到了一些麻煩。從排隊停止滾動功能

下面是我的問題的一個例子，嘗試滾動，你會看到問題是什麼。 http://fadedmeadows.com/test/

var index = 0; 
 
var scroll2 = true; 
 
$(document).ready(function() { 
 
    $("#home").css({ 
 
    "color": "#eb0e0e", 
 
    }); 
 
}); 
 

 
$(window).bind('mousewheel DOMMouseScroll touchmove', function(event) { 
 
    scroll2 = true; 
 
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
 
    // scroll up 
 
    if (index > 4) index = 4; 
 

 
    if (index == 4 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content3").offset().top 
 
     }, 1000); 
 
     index--; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 3 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content2").offset().top 
 
     }, 1000); 
 
     index--; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 2 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content").offset().top 
 
     }, 1000); 
 
     index--; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 1 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("header").offset().top 
 
     }, 1000); 
 
     index--; 
 
     scroll2 = false; 
 
    } 
 
    } else { 
 
    // scroll down 
 
    if (index < 0) index = 0; 
 
    if (index == 0 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content").offset().top 
 
     }, 1000); 
 
     index++; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 1 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content2").offset().top 
 
     }, 1000); 
 
     index++; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 2 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content3").offset().top 
 
     }, 1000); 
 
     index++; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 3 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content4").offset().top 
 
     }, 1000); 
 
     index++; 
 
     scroll2 = false; 
 
    } 
 
    } 
 
});

來源

2015-04-12 Kommander Krunt

不知道這是否會幫助你，但我有實際的事件監聽器，並設置每當接收到事件的超時。

如果事件在前一個超時過期之前觸發，則取消前一個超時。超時實際上觸發了這個動作。因此，一系列相繼發生的類似事件被沉默並被拋棄。

我主要用於窗口大小調整事件，但它也可能適用於此。純JS代碼可能是這個樣子：

var resizeTimeout = null, wait = 200; 
window.onresize = function(){ 
    if (resizeTimeout !== null) { 
    window.clearTimeout(resizeTimeout); 
    resizeTimeout = null; 
    } 
    resizeTimeout = setTimeout(function(){ 
    //do whatever is needed to deal with window resize. 
    }, wait); 
}

（但我有一個包裝「類」叫定時器，使其成爲一個有點清潔劑來做這種事情）

來源

2015-04-12 18:07:50

我是否能申報「等待「作爲一個變量，仍然有這個代碼工作？我已經使用類似的語言的JavaScript，所以這種方式奠定了對我來說沒有意義。我覺得這是正確的軌道，但它不適合我，我需要儘快完成這個網站，提前謝謝你。 –

沒關係我解決了這個問題，非常感謝你的幫助。我希望我可以upvote你，但它不會讓我呢。 –

@KommanderKrunt沒問題。所以IIUC，你能夠將這種方法適用於你的用例？如果是這樣，很酷！很高興它幫助你:) –

從排隊停止滾動功能

回答

相關問題