【问题标题】:How to disable scrolling until animation is complete?如何在动画完成之前禁用滚动?
【发布时间】:2012-07-23 20:50:33
【问题描述】:

我正在使用此代码滚动到页面上的某个元素:

$("html, body").animate({scrollTop: $(".myDiv").offset().top}, 300);

它可以工作,但有一个问题:当用户向下滚动而脚本向上滚动时,会出现一些抖动,因为同时有两个不同方向的滚动命令 - 对我来说听起来合乎逻辑。

我检查了其他一些具有此类滚动功能的网站,没有抖动。那么防止这种情况的诀窍是什么?

【问题讨论】:

  • 你在哪个事件上使用这个: $("html, body").animate({scrollTop: $(".myDiv").offset().top}, 300);你能解释一下吗?
  • 您是通过悬停或单击或其他方式使用它吗?
  • 我在点击时使用它,比如$("somehting").click(function() { ... });

标签: javascript jquery scroll jquery-animate


【解决方案1】:

当您使用带有滚动的动画时,这是一个 jQuery 错误,很好的检测。

我研究了如何关闭滚动并找到这个问题:How to disable scrolling temporarily?

Here is jsFiddle. You will see after click; user cant scroll untill animate complete.

$('.myDiv').click(function(){

    disable_scroll();

    $('html, body').stop().animate({ scrollTop: 0 }, 700,function() {
        enable_scroll();
    });
});

编辑:感谢 galambalazs 顺便说一句。

【讨论】:

  • 感谢您向我指出 galambalazs 的答案。如果其他人在这里结束,我已经将他的解决方案重构为一个很好的独立对象:stackoverflow.com/a/21533631/940252
【解决方案2】:

一个想法 - 尝试连接到滚动事件并使用 http://api.jquery.com/stop/ 停止动画 .. 坏主意..

同样的问题有一个解决方案 - let user scrolling stop jquery animation of scrolltop?

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-07-14
    • 2017-03-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多