JavaScript:当用户滚动时对滚动进行动画处理

javascript: animate scrolling when user scrolls

本文关键字：滚动 动画 处理 用户 JavaScript      更新时间：2023-09-26

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

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，否则它不应该动画。只有在动画完成时，它才会被设置回 false...右？

一个潜在的解决方法，虽然我相信有人可以想出更好的解决方案，但在滚动后将其禁用一段时间。

相关代码：

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

这仅允许动画在至少 11 毫秒后发生。似乎适用于低至 2 的值。您并没有真正注意到滚动有任何滞后，但同样，我不认为这是一个理想的解决方案。

演示

我能够让它工作，我仍然不知道为什么它不能像编码的那样工作，但这是对我有用的解决方案 - 我受到@sachleen的回答的启发。谢谢萨克琳。

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

相关文章：