jquery - 在滚动功能期间切换类

Question

如果有可能以某种方式编写一个片段，在窗口的滚动功能期间，主体会附加一个类？

$(window).scroll(function() {
    $('body').toggleClass('scrolling');
 });

如果用户正在滚动，则正文具有“滚动”类。如果当前未发生滚动，则正文没有类。

滚动功能似乎与上面的功能一起快速触发。

Answer 1

没有像“mouse down”和“mouse up”这样的“scroll start”和“scroll end”对：“scroll”事件更像是“刚刚发生的滚动”。如果n毫秒内没有发生滚动，您可以设置超时以清除“滚动”类：

var scrollTimerId;

$(window).scroll(function() {
    if (!scrollTimerId)
       $('body').addClass('scrolling');

    clearTimeout(scrollTimerId);
    scrollTimerId = setTimeout(function(){
        $('body').removeClass('scrolling');
           scrollTimerId = undefined;
    },150);
});

演示：http: //jsfiddle.net/8CaRE/2/

（改变延迟，直到你找到你满意的东西——对我来说，150ms 似乎在 Chrome 中是一个合理的设置。）

Answer 2

在性能方面可能不是很健康，但是您可以setInterval每隔几毫秒添加一个来删除该类，并结合您的scroll处理程序在滚动时添加它。

$(window).on('scroll', function() {
    $('body').addClass('scrolling');
});

setInterval(function() {
    $('body').removeClass('scrolling');
}, 100);​

http://jsfiddle.net/pYVL8/

或者，稍微优化一下：

setInterval(function() {
    document.getElementsByTagName('body')[0].className = '';
}, 100);​

http://jsfiddle.net/pYVL8/1/