2

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

它和我在这个网站上找到的非常相似。由于我没有找到任何 jQuery 插件，所以我试图自己重现它，但我在滚动行为方面遇到了一些麻烦。

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

这是我的小提琴，您可以在其中查看：http: //jsfiddle.net/k4rsN/1/

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

我一直在看这样或这样的帖子，但它并没有解决我的问题。

到目前为止，这就是我所做的，正如您在小提琴中看到的那样：

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;
        });
    }
});

谢谢。

4

1 回答 1

1

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

在动画开始时 

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

然后，在那结束

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

这与此答案几乎相同：https ://stackoverflow.com/a/17293689/2247151

于 2013-07-08T16:27:09.810 回答