jQuery "Snap To" -Effekt

Question

Ich habe einen bestimmten Effekt, ich möchte für eine Website, die ich baue. Wie Sie in this website sehen können, möchte ich, dass der Bildschirm auf den nächsten Abschnitt "rastet", nachdem der Benutzer scrollt, aber nur nach (nicht der Zeitpunkt) das Scroll-Ereignis ausgelöst hat. Der Grund, warum ich ein Plugin wie panelSnap nicht verwenden möchte, ist, weil ich 1: Want kleineren Code und
2. Willst du die Website, wenn auf dem Handy angesehen, mehr von der "Instant Snap" -Effekt haben (versuchen zu reduzieren die Browsergröße auf der oben genannten Website). Ich weiß, ich theoretisch könnte versuchen, zwei Plugins, wie Panelsnap und Scrollify zu kombinieren, und aktivieren Sie sie angemessen, wenn der Browser eine bestimmte Breite ist, aber ich weiß nicht, ob ich das tun möchte ... :(

So alles das heißt, hier ist der Code:

var scrollTimeout = null; 
var currentElem = 0; 
var options = { 
    scrollSpeed: 1100, 
    selector: 'div.panels', 
    scrollDelay: 500, 
}; 
$(document).ready(function() { 
    var $snapElems = $(options.selector); 
    console.log($($snapElems[currentElem]).offset().top); 
    function snap() { 
     if ($('html, body').scrollTop() >= $($snapElems[currentElem]).offset().top) { 
      if (currentElem < $snapElems.length-1) { 
       currentElem++; 
      } 
     }else{ 
      if (currentElem > 0) { 
       currentElem = currentElem - 1; 
      } 
     } 
     $('html, body').animate({ 
      scrollTop: $($snapElems[currentElem]).offset().top 
     }, options.scrollSpeed); 
    } 
    $(window).scroll(function() { 
     if ($(window).innerWidth() > 766) { 
      if (scrollTimeout) {clearTimeout(scrollTimeout);} 
      scrollTimeout = setTimeout(function(){snap()}, options.scrollDelay); 
     }else{ 
      //I'll deal with this later 
     } 
    }); 
}); 

Mein Problem ist, dass jedes Mal, wenn die snap Funktion aufgerufen wird, es das Scroll-Ereignis auslöst, die es in eine Schleife führt, wo das Fenster nicht zwischen dem Scrollen stoppt erste und zweite Elemente Hier ist die schlechte, dysfunktionale Website: https://tcfchurch.herokuapp.com/index.html Vielen Dank für die Hilfe

Answer 1

Sie können einen booleschen Wert verwenden, um aufzuzeichnen, wenn die Bildlaufanimation in snap läuft, und verhindern, dass der Ereignishandler $(window).scroll() eine Aktion ausführt.

Hier ist ein funktionierendes Beispiel:

var scrollTimeout = null; 
var currentElem = 0; 
var options = { 
    scrollSpeed: 1100, 
    selector: 'div.panels', 
    scrollDelay: 500, 
}; 
$(document).ready(function() { 
    var scrollInProgress = false; 
    var $snapElems = $(options.selector); 
    console.log($($snapElems[currentElem]).offset().top); 
    function snap() { 
     if ($('html, body').scrollTop() >= $($snapElems[currentElem]).offset().top) { 
      if (currentElem < $snapElems.length-1) { 
       currentElem++; 
      } 
     }else{ 
      if (currentElem > 0) { 
       currentElem = currentElem - 1; 
      } 
     } 

     scrollInProgress = true; 
     $('html, body').animate({ 
      scrollTop: $($snapElems[currentElem]).offset().top 
     }, options.scrollSpeed, 'swing', function() { 
      // this function is invoked when the scroll animate is complete 
      scrollInProgress = false; 

     }); 
    } 
    $(window).scroll(function() { 
     if (scrollInProgress == false) { 
      if ($(window).innerWidth() > 766) { 
       if (scrollTimeout) {clearTimeout(scrollTimeout);} 
       scrollTimeout = setTimeout(function(){snap()}, options.scrollDelay); 
      }else{ 
       //I'll deal with this later 
      } 
     } 
    }); 
}); 

Die Variable scrollInProgress auf false standardmäßig eingestellt ist. Es wird dann auf true gesetzt, wenn der Bildlauf animate beginnt. Wenn der animate beendet ist, wird scrollInProgress auf false zurückgesetzt. Eine einfache if-Anweisung oben in der $(window).scroll()-Ereignisbehandlungsroutine verhindert, dass der Handler eine Aktion ausführt, während der Bildlauf animate ausgeführt wird.

Answer 2

Haben Sie darüber nachgedacht, die bekannte fullPage.js-Bibliothek zu verwenden? Schauen Sie sich dieses normal scroll Beispiel an. Das Snap-Timeout ist über die Option fitToSectionDelay konfigurierbar. Und nichts über die Größe zu kümmern ... es ist 7Kb Gzipped!

Ich weiß, dass ich theoretisch könnten versuchen, zwei Plugins kombinieren, wie panelsnap und scrollify, und aktivieren Sie sie entsprechend, wenn der Browser eine bestimmte Breite ist, aber ich weiß nicht, ob ich möchte, dass

fullPage.js bietet auch responsiveWidth und responsiveHeight Optionen, um es unter bestimmten Abmessungen zu deaktivieren.