gpt4 book ai didi

javascript - 当用户手动滚动时,Jquery .animate() 停止滚动?

转载 作者:IT王子 更新时间:2023-10-29 03:07:22 27 4
gpt4 key购买 nike

我已经设置了一个片段,当它被点击时,页面部分会滚动到 View 中,问题是如果用户想在动画中间滚动,滚动会有点卡顿。

    $( "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;
});

这将:

  • 如果用户手动滚动则停止动画(仅在动画期间)
  • 不会妨碍您正常的 jQuery 动画,其他一些答案会这样

一些额外的信息:

Why are you binding to all of those events? "scroll mousewheel etc..."

有许多不同类型的滚动事件。您可以使用鼠标、键盘、触摸屏等向下滚动。有了这个,我们确保捕获所有它们。

What is the use of var page = $("html, body");? Can't I just use $("html, body") everywhere?

如果您多次使用同一个选择器,最好将它们缓存在 variable 中.与程序每次都重新计算选择器相比,它更易于编写/使用,并且具有更好的性能。

Where can I find more info on .animate() and .stop()?

您可以阅读 .animate() 的 jQuery 文档和 .stop() .我还建议阅读 animation queue's因为 .stop() 遵循这个原则。

关于javascript - 当用户手动滚动时,Jquery .animate() 停止滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18445590/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com