我已经设置了一个片段,当它被点击时将页面部分滚动到视图中,问题是如果用户想要在动画中间滚动滚动有点口吃。
$( "section" ).click(function(e) {
$('html,body').animate({ scrollTop: $(this).position().top }, 'slow');
return false;
});
如果用户手动滚动,如何停止 jquery 动画?
我已经设置了一个片段,当它被点击时将页面部分滚动到视图中,问题是如果用户想要在动画中间滚动滚动有点口吃。
$( "section" ).click(function(e) {
$('html,body').animate({ scrollTop: $(this).position().top }, 'slow');
return false;
});
如果用户手动滚动,如何停止 jquery 动画?
将您的功能更改为:
var page = $("html, body");
$( "section" ).click(function(e) {
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
page.stop();
});
page.animate({ scrollTop: $(this).position().top }, 'slow', function(){
page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
});
return false;
});
这将:
一些额外的信息:
你为什么要绑定所有这些事件?“滚动鼠标滚轮等......”
有许多不同类型的滚动事件。您可以使用鼠标、键盘、触摸屏等向下滚动。这样我们可以确保捕捉到所有这些。
有什么用
var page = $("html, body");
?我不能$("html, body")
到处使用吗?
如果您多次使用同一个选择器,最好将它们缓存在一个变量中。它比让程序每次都重新计算选择器更容易编写/使用,并且具有更好的性能。
我在哪里可以找到有关
.animate()
和的更多信息.stop()
?
您可以阅读.animate()和.stop()的 jQuery 文档。我还建议阅读有关动画队列的内容,因为.stop()
它是基于此原理工作的。
我会通过检测用户事件来做到这一点
$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function (e) {
if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove") {
$("html,body").stop();
}
});
这是一个很好的教程。
$("your selector").scroll(function(){
$('html,body').stop();
});
参考站
尝试这个
$('html,body').scroll(function() {
$(this).stop(true, false);
});
它还会从元素的队列中删除所有其他动画,但不会“跳转”到当前滚动动画的末尾。