2013-11-15 10 views
7

Ich verwende eine geänderte Version von http://nick-jonas.github.io/windows/, die es einem Benutzer ermöglicht, in einem DIV verschiedene Abschnitte zu scrollen, die dann wieder einrasten.Stoppt das aktuelle scrollTo-Ereignis, wenn der Benutzer scrollt

Weil ich verschiebe ein DIV I ersetzt haben:

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

mit:

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

So wie man sehen kann ich das scrollTo Plugin verwenden, um den sichtbaren div zu springen, anstatt sich auf komplexe Offsets wie der vorherige Code.

Ein Fehler, den ich sowohl in der Original-Code bemerkt haben und meine eigene ist, dass, wenn das Knacken dies der Benutzer interupts gestartet wurde und dann durch Scrollen, sie mit dem Scroll-Ereignis kämpfen am Ende wird um den Inhalt zu blättern. Wenn also scrollTo um 100 Pixel nach unten scrollt und dann versuchen, mit der Browser-Bildlaufleiste um 300 Pixel nach oben zu scrollen, wird der Bildschirm als Ereignis- und Browser-Scroll-Kampf ruckeln.

Irgendwelche Ideen, wie ich das stoppen kann? Ich hoffe jetzt, dass ich das scrollTo Plugin benutze, es wird einfacher damit umzugehen.

Bisher habe ich versucht:

$('.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'); 
    } 
}); 

Aber das stoppt den Knacken von überhaupt passiert ... irgendwelche Ideen für eine Korrektur?

+0

Ich bin mir nicht sicher, ob du stattdessen mit fullPage.js was willst. – Alvaro

+0

Übrigens, um das Scrollen mit der Maus zu vermeiden, ist die Verwendung von css 'body, html {scroll: hidden;}' die Vorgehensweise. – Alvaro

+0

@Alvaro gibt es keine CSS-Eigenschaft namens 'scroll'. Meinst du "Überlauf"? – Pavlo

Antwort

15

könnten Sie bitte versuchen

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

Syntax .stop ist ([clearQueue], [jumpToEnd])

+0

Warum runter? Hast du versucht ? –

+0

Ich bin mir nicht sicher, wer es gewählt hat oder warum ... aber es scheint für mich zu funktionieren! – Cameron

+0

sagen Sie mir, wenn es eine Notwendigkeit gibt, anzupassen –

3

This answer-another question scheint Ihr Problem zu lösen. Im Grunde binden Sie einfach an die scroll, wheel und andere Ereignisse, die anzeigen können, dass der Benutzer scrollt, dann überprüfen Sie, ob das Scrollen durch den Benutzer verursacht wird. Ist dies der Fall, stoppen Sie die Animation.

Hier ist die Funktion in Frage (Kredit 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(); 
    } 
}); 

Basierend auf meinem Verständnis des Problems, würden Sie wollen, mit $('.windows'), wie so $("html,body") und $('body,html') oben ersetzen:

$('.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.