jquery scroll de página completa sin plugin

https://jsfiddle.net/dewit/xnq0pzx0/1/

var currentLocation = 'firstPage'; $(document).scroll(function(e){ var scrolled = $(window).scrollTop(), secondHeight = $('#secondPage').offset().top, thirdHeight = $('#thirdPage').offset().top; if (scrolled > 1 && currentLocation == 'firstPage') { currentLocation = 'secondPage'; $('body').animate({scrollTop:$('#secondPage').offset().top}, 500); } else if (scrolled > secondHeight + 1 && currentLocation == 'secondPage') { currentLocation = 'thirdPage'; $('body').animate({scrollTop:$('#thirdPage').offset().top}, 500); } else if (scrolled < thirdHeight - 1 && currentLocation == 'thirdPage') { currentLocation = 'secondPage' $('body').animate({scrollTop:$('#secondPage').offset().top}, 500); } else if (scrolled < secondHeight - 1 && currentLocation == 'secondPage') { currentLocation = 'firstPage'; $('body').animate({scrollTop:$('#firstPage').offset().top}, 500); } }) 

Quiero hacer un control deslizante de página completa sin plugin.

Espero que esto detecte la página actual y la dirección de desplazamiento y mueva la página siguiente o anterior.

El problema es que mientras la diapositiva está cambiando, detecta una nueva ubicación y se desplaza.

Como resultado, rebota hacia arriba y hacia abajo.

Por lo tanto, quiero congelar esta función mientras se mueve la diapositiva.

Pero, no sé cómo tratar esto.

El problema es que el detector de eventos se activa cuando el usuario se desplaza y también por su animación. Por lo que veo, usted quiere verificar todas las declaraciones if / else solo cuando el usuario se desplaza. Algo como lo siguiente debería ayudar:

 var currentLocation = 'firstPage'; // No need to set these inside the event listener since they are always the same. var firstHeight = $('#firstPage').offset().top, secondHeight = $('#secondPage').offset().top, thirdHeight = $('#thirdPage').offset().top; // Helper so we can check if the scroll is triggered by user or by animation. var autoScrolling = false; $(document).scroll(function(e){ var scrolled = $(window).scrollTop(); // Only check if the user scrolled if (!autoScrolling) { if (scrolled > 1 && currentLocation == 'firstPage') { scrollPage(secondHeight, 'secondPage'); } else if (scrolled > secondHeight + 1 && currentLocation == 'secondPage') { scrollPage(thirdHeight, 'thirdPage'); } else if (scrolled < thirdHeight - 1 && currentLocation == 'thirdPage') { scrollPage(secondHeight, 'secondPage'); } else if (scrolled < secondHeight - 1 && currentLocation == 'secondPage') { scrollPage(firstHeight, 'firstPage'); } } // Since they all have the same animation, you can avoid repetition function scrollPage(nextHeight, page) { currentLocation = page; // At this point, the page will start scrolling by the animation // So we switch this var so the listener does not trigger all the if/else autoScrolling = true; $('body,html').animate({scrollTop:nextHeight}, 500, function () { // Once the animation is over, we can reset the helper. // Now it is back to detecting user scroll. autoScrolling = false; }); } $('h1').html(scrolled); $('h1').append("/" + secondHeight); $('h1').append("/" + thirdHeight); }) 
 *{ padding: 0; margin: 0; } html,body{ width: 100%; height:100%; } .page{ width: 100%; line-height: 100vh; text-align: center; } header{ position: fixed; } 
  

first page

second page

third page