Question

我希望在用户滚动时将页面滚动增量动画到页面的不同部分。所以我写了这段代码：

var $window = $(window);    
var sectionHeight = $window.height();
var animating = false;
var dir;
// initialize page position (0)
var pagePos = $(window).scrollTop();

$(window).scroll(function() {
    // current page position    
    var st = $(this).scrollTop();

    // whether to animate up or down        
    dir = ((st > pagePos) ? '+=' : '-=');

    // animate 
    if (animating == false) {
        animating = true;
        $('html, body').stop().animate({scrollTop: dir+sectionHeight},500, function() {

            pagePos = $(window).scrollTop();    
            animating = false;
        }); 
    }
});

问题是，我在初始动画播放后得到一个链式动画，将页面动画回到顶部。我不确定为什么，因为它不应该动画，除非'动画'设置为false。只有在动画完成时它才会被设置为假...对吗？

Answer 1

虽然我确信有人可以提出更好的解决方案，但有一个可能的解决办法是在滚动后的一段时间内禁用它。

相关代码：

var ct = new Date().getTime();

if (animating == false && new Date().getTime() > ct + 10)

这只允许动画在至少11ms过去时发生。似乎适用于低至2的值。你没有真正注意到滚动的任何延迟，但我再也不认为这是一个理想的解决方案。

DEMO

Answer 2

我能够让它工作，我仍然不知道为什么它不会被编码，但这里的解决方案对我有用 - 我的灵感来自@ sachleen的回答。谢谢sachleen。

我将滚动动画移动到一个单独的函数中，然后在动画函数的回调中，我使用了与动画相同持续时间的setTimeout来调用另一个函数，该函数只是将'animating'布尔值更改为false。

javascript：用户滚动时动画滚动

2 个答案: