如何在动画完成之前禁用滚动？ [英] How to disable scrolling until animation is complete?

问题描述

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

I am using this code to scroll to a certain element on my page:

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

它有效，但有一个问题：用户在脚本向上滚动时向下滚动有一些抖动，因为有两个滚动命令同时在不同的方向 - 对我来说听起来很合理。

It works, but there is one issue with it: When the user scrolls down while the script scrolls up, there is some juddering because there are two scroll commands at the same time in different directions - sounds logical to me.

我检查了其他具有滚动功能的网站，那里没有动摇。那么防止这种情况的诀窍是什么？

I checked some other sites with such scroll functionality, there is no juddering. So what's the trick to prevent this?

推荐答案

当您使用滚动，良好检测的动画时会出现jQuery错误。

Thats a jQuery bug when you use animate with scrolling, good detection.

我做了一项研究，如何将其关闭滚动并找到这个问题：如何暂时禁用滚动？

I did a research how to turn it off scrolling and find this question : How to disable scrolling temporarily?

这是jsFiddle。点击后你会看到;用户无法滚动，直到动画完成。

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

    disable_scroll();

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

编辑：感谢galambalazs btw。

edit: thanks to galambalazs btw.

这篇关于如何在动画完成之前禁用滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！