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

滚动动画发生时禁用滚动

1 个答案: