Estoy tratando de activar un desplazamiento suave a un elemento al final de la página y otro a la parte superior de la página cada vez que muevo la rueda del mouse respectivamente hacia abajo o hacia arriba. Las dos partes tienen ambas altura: 100vh.
Lo que pasa es que una vez que baja empieza a comportarse de forma aleatoria. Siento que necesito interrumpir la animación por completo después de que se completa el desplazamiento porque "lucha consigo mismo" luchando por volver a subir y viceversa. Por supuesto que podría equivocarme fácilmente, estoy tratando de aprender el camino.
¿Hay algún problema de rendimiento? ¿Tal vez no puede obtener las entradas a tiempo? ¿Algo se superpone? Parece que hay algún tipo de tiempo de reutilización antes de que pueda desplazarme de nuevo. Esto es lo que estoy tratando de entender. Gracias
jQuery(window).bind('mousewheel DOMMouseScroll', function(event){ if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { // scroll up console.log("scroll up"); jQuery('html,body').animate({scrollTop: jQuery("#top").offset().top}, 1200, 'linear'); } else { // scroll down console.log("scroll down"); jQuery('html,body').animate({scrollTop: jQuery("#bottom").offset().top}, 1200, 'linear'); } });Lo mismo con esto, aquí estoy usando la biblioteca Jquery.scrollTo
jQuery(window).bind('mousewheel DOMMouseScroll', function(event){ if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { // scroll up console.log("scroll up"); jQuery('body').scrollTo('#top', {duration:1200}); } else { // scroll down console.log("scroll down"); jQuery('body').scrollTo('#bottom', {duration:1200}); } });Aquí está el html para completar:
<div id="top" style="height:100vh;background-color: #2196f3;"></div> <div id="bottom" style="height:100vh;background-color: #009688;"></div>EDITAR: si muevo la rueda del mouse solo lo mínimo, funciona perfectamente en ambos sentidos, por lo que el problema es la superposición de entradas, en otras palabras, necesito una forma de enviar solo la primera entrada de desplazamiento y no todo el desplazamiento; de lo contrario, demasiadas entradas hacen que el script " choque".
aquí hay un ejemplo de trabajo, intente desplazarse hacia arriba y hacia abajo: https://jsfiddle.net/mr8hnxbd/
Llamar a .stop(true) funciona, pero creo que podría causar problemas a mitad de la animación si continúa desplazándose en la dirección de la animación, extendiendo la duración de la animación. Alternativamente, puede hacer lo siguiente para asegurarse de que la animación se complete antes de hacer otra animación.
(function(jQuery) { let position = ''; let scrolling = false; let animationDuration = 1200; jQuery(window).bind('mousewheel', function(event){ if (event.originalEvent.wheelDelta > 0) { // scroll up if (scrolling || position === 'top') return; //console.log("scroll up"); scrolling = true; //Prevents any scrolling when scrolling is active position = 'top'; //Prevents scrolling up when already at the top jQuery('html,body').animate( { scrollTop: jQuery("#top").offset().top }, animationDuration, 'linear', function () { scrolling = false; //After the animation is complete, set scroling to false }, ); } else { // scroll down if (scrolling || position === 'bottom') return; //console.log("scroll down"); scrolling = true; position = 'bottom'; jQuery('html,body').animate( { scrollTop: jQuery("#bottom").offset().top }, animationDuration, 'linear', function () { scrolling = false; }, ); } }); })($); <div id="top" style="height:100vh;background-color: #2196f3;"></div> <div id="bottom" style="height:100vh;background-color: #009688;"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>