Ligue para a rolagem apenas quando o usuário rola, não quando Animate ()
-
11-09-2019 - |
Pergunta
Eu tenho alguns links em toda a página com o objetivo de "ir para o topo", realizado rolando a página para o topo com uma boa animação. Percebi que, às vezes, enquanto a página está rolando o usuário, desejará rolar de volta, por exemplo, mas isso não é possível. A tela só ganha, mas continuará animando até chegar ao topo.
Quero parar a animação se o usuário tentar rolar, portanto, escrevi este código:
$('#gototop').click(function() {
$('body').animate({scrollTop:0},3000);
$(window).scroll(function () {
$('body').stop();
});
return false;
})
Esse código é problemático, porque o Animate () conta como rolagem, portanto, ele só move um pouco antes de parar.
Também tentei o Key-Down como uma opção, mas o rolagem do mouse não se registra como chave.
Existe alguma maneira de chamar minha função de rolagem quando o do utilizador Rolls, não o Animate ()?
Solução
Você pode fazer escrever seu próprio código para definir o valor da animação e definir um sinalizador indicando que a alteração vem de uma animação.
Por exemplo: (não testado)
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;
})
Você pode fazer a mesma coisa para scrollLeft
.
Observe que estou assumindo essa configuração scrollTop
é uma chamada reentrante, para que o scroll
Evento é demitido dentro da linha E.elem.scrollTop = E.now
. Se não for reentrante (pode ser apenas em alguns navegadores), o evento será demitido depois scrollAnimating
é recolocado para false
. Para consertar isso, você pode redefinir scrollAnimating
dentro de scroll
evento.
Outras dicas
Eu estava com o mesmo problema, mas encontrei uma solução na documentação do jQuery. Existe uma propriedade no método Animate que permite definir uma função de retorno de chamada quando a animação é concluída.
http://api.jquery.com/animate/#animate-properties-duration-easing-complete
Aqui está o 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;
})
Descobriu! Depois de olhar em volta na internet, encontrei algo chamado Document.addEventListener
para Mozilla e document.onmousewheel
Para o IE e a ópera, que capturam eventos de rolagem.
$('#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;
})