滚动动画发生时禁用滚动

Question

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

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

当滚动动​​画发生时，你仍然可以用鼠标滚轮滚动，它使运动看起来很难看，上下移动一会儿。

这是我的小提琴，你可以在这里查看：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