Llamar de desplazamiento sólo cuando el usuario se desplaza, no cuando animado ()
-
11-09-2019 - |
Pregunta
Tengo un par de enlaces a través de la página con el propósito de "ir a la cima", realizada por el desplazamiento de la página a la parte superior con una bonita animación. Me he dado cuenta de que a veces mientras que la página se desplaza el usuario va a querer desplazarse hacia abajo, por ejemplo, pero esto no es posible. La pantalla sólo tartamudear, pero continuará animando hasta que llega a la parte superior.
Quiero detener la animación si el usuario intenta desplazarse, por lo tanto, he escrito este código:
$('#gototop').click(function() {
$('body').animate({scrollTop:0},3000);
$(window).scroll(function () {
$('body').stop();
});
return false;
})
Este código es problemático, porque lo animado () cuenta como el desplazamiento, por lo que sólo se mueve un poquito antes de que se detenga en sí.
También he intentado manipulador cerrado como una opción, pero el desplazamiento del ratón no se registra como una clave.
¿Hay alguna manera de llamar a mi función de desplazamiento cuando el usuario pergaminos, no lo animado ()?
Solución
Se podría hacer escribir su propio código para establecer el valor de la animación, y establecer un indicador que indica que el cambio viene de una animación.
Por ejemplo: (no probado)
var scrollAnimating = false
jQuery.fx.step.scrollTop = function(E) {
scrollAnimating = true;
E.elem.scrollTop = E.now;
scrollAnimating = false;
};
$('#gototop').click(function() {
$('body').animate({scrollTop:0},3000);
$(window).scroll(function () {
if (!scrollAnimating)
$('body').stop();
});
return false;
})
Usted puede hacer lo mismo para scrollLeft
.
Tenga en cuenta que estoy suponiendo que la fijación de scrollTop
es una llamada entrante, por lo que el evento se dispara scroll
dentro de la línea de E.elem.scrollTop = E.now
. Si no es reentrante (que podría ser sólo en algunos navegadores), el evento será despedido después scrollAnimating
se vuelve a establecer en false
. Para corregir esto, se podía restablecer scrollAnimating
dentro del evento scroll
.
Otros consejos
Yo estaba con el mismo problema, pero he encontrado una solución correcta en jQuery Documentación. Hay una propiedad en el método animado que le permite establecer una función de devolución de llamada cuando se ha completado la animación.
http://api.jquery.com/animate/ # animados-properties-duración-flexibilización completa
Este es el código:
$('#gototop').click(function() {
//This will help you to check
var animationIsFinished = false;
$('body').animate({scrollTop:0},3000,"swing",function(){
//this function is called when animation is completed
animationIsFinished = true;
});
$(window).scroll(function () {
//Check if animation is completed
if ( !animationIsFinished ){
$('body').stop();
}
});
return false;
})
lo descubrió! Después de mirar en Internet me encontré con algo que se llama Document.addEventListener
para Mozilla y document.onmousewheel
para IE y Opera que cogerá el desplazamiento eventos.
$('#gototop').click(function() {
$('body').animate({scrollTop:0},3000);
if(window.addEventListener) document.addEventListener('DOMMouseScroll', stopScroll, false);
document.onmousewheel = stopScroll;
function stopScroll() {$('body').stop()};
return false;
})