javascript - 滚动动画发生时禁用滚动

Question

我试图在用户向上或向下移动鼠标滚轮、按下关键字箭头或移动侧面的滚动条时创建滚动动画。

它与我发现的非常相似on this site .由于我没有找到任何适用于它的 jQuery 插件，我正在尝试自己重现它，但我在滚动行为方面遇到了一些麻烦。

在滚动动画的时候，鼠标滚轮还可以滚动，动起来难看，一会儿上下。

这是我的 fiddle ，您可以在其中查看它:http://jsfiddle.net/k4rsN/1/

问题是滚动没有被禁用，在我检查它们是向上滚动还是向下滚动之前，网站已经滚动了一点(滚轮的移动，或关键字)。因此，我相信解决它的方法是禁用滚动效果并让我决定在用户​​决定滚动时要做什么。

我一直在看像 this 这样的帖子或 this但它不能解决我的问题。

这是我到目前为止所做的，您可以在 the fiddle 中看到:

var lastScrollTop = 0;
var isMoving = false;

$(window).scroll(function () {
    var currentScroll = $(window).scrollTop();

    //scrolling down?
    if (currentScroll > lastScrollTop && !isMoving) {
        var value = '#link2';
    }
    //scrolling up?
    else if (!isMoving) {
        var value = '#link1';
    }

    lastScrollTop = currentScroll;

    //animation
    if (value && !isMoving) { //if theres any #
        isMoving = true;

        dest = $(value).offset();

        $('html, body').animate({
            scrollTop: dtop
        }, 1200, function () {

            //setting the flag to avoid checking the scrolling when performing the animation
            isMoving = false;
        });
    }
});

谢谢。

Answer 1

在函数的开头，您可以应用一些 CSS 属性使其不可滚动。然后在动画结束时，将其恢复为正常状态。例如:

在你的动画开始时

$('html, body').css({
    'overflow': 'hidden',
    'height': '100%'
})

然后，然后结束

$('html, body').css({
    'overflow': 'auto',
    'height': 'auto'
})

这实际上与以下答案相同:https://stackoverflow.com/a/17293689/2247151