當用戶滾動時停止當前的scrollTo事件

我使用http://nick-jonas.github.io/windows/的修正版本，它允許用戶在DIV內部滾動不同部分，然後再跳回原位。當用戶滾動時停止當前的scrollTo事件

因爲我滾動我已經更換一個DIV：

$('.windows').animate({scrollTop: scrollTo }, options.snapSpeed, function(){ 
        if(!completeCalled){ 
         if(t){clearTimeout(t);} 
         t = null; 
         completeCalled = true; 
         options.onSnapComplete($visibleWindow); 
        } 
       });

有：

$('.windows').scrollTo($visibleWindow , options.snapSpeed, { onAfter:function(){ 
        if(!completeCalled){ 
         if(t){clearTimeout(t);} 
         t = null; 
         completeCalled = true; 
         options.onSnapComplete($visibleWindow); 
        } 
       }});

所以你可以看到我用的scrollTo插件跳到可見DIV，而不是依靠像以前的代碼一樣複雜的偏移量。

我注意到在原始代碼和我自己的錯誤是，如果捕捉已經開始，然後用戶通過滾動來中斷這些，它們將最終與滾動事件作鬥爭來滾動內容。因此，如果scrollTo向下滾動100個像素，然後他們嘗試使用瀏覽器滾動條向上滾動300個像素，則隨着事件和瀏覽器滾動戰鬥，屏幕將會出現抖動。

有關如何阻止此問題的任何想法？我希望現在我正在使用scrollTo插件，這將更容易處理。

到目前爲止，我曾嘗試：

$('.windows').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){ 
    if (e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){ 
     $(this).stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); 
    } 
});

但這停止捕捉情況發生在所有...任何想法的解決？

來源

2013-11-15 Cameron

我不確定您是否可以使用fullPage.js代替您想要的。 – Alvaro

順便說一句，爲了避免使用鼠標滾動，使用css'body，html {scroll：hidden;}'是繼續的方法。 – Alvaro

@Alvaro沒有名爲'scroll'的CSS屬性。你是不是指「溢出」？ – Pavlo

能不能請你

$('.windows').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){ 
if (e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){ 
    $('.windows').stop(true,false); 
} 
});

語法是.stop（[clearQueue]，[jumpToEnd]）

來源

2013-11-19 12:29:46

爲什麼downvote？你試過了嗎？ –

不知道誰投了票或爲什麼......但它看起來是爲我工作！ – Cameron

告訴我是否需要調整 –

This answer到another question似乎爲解決你的問題。基本上，您只需綁定到scroll,wheel以及其他可能表明用戶正在滾動的事件，然後檢查滾動是否由用戶引起。如果是這樣，請停止動畫。

這裏是有問題的功能（信用Mottie）：

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e){ 
    if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel") { 
     $("html,body").stop(); 
    } 
});

根據我對你的問題的理解，你想用$('.windows')更換$("html,body")和$('body,html')上面，像這樣：

$('.windows').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e){ 
    if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel") { 
     $(".windows").stop(); 
    } 
});

There's a working demo。

來源

2013-11-19 12:39:10

當用戶滾動時停止當前的scrollTo事件

回答

相關問題