滚动时切换类的函数

Question

是否有可能编写一个代码片段，在窗口滚动功能期间将body附加到类?

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

如果用户正在滚动，则body元素具有“scrolling”类。如果当前未发生滚动，则没有该类。

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

- user120944

---

+1，但请定义“滚动”是什么意思... - gdoron

请参考http://api.jquery.com/scroll/获取一个可工作的示例。不幸的是，检测滚动开始很容易，但要知道何时停止却更难。 - Blazemonger

@Blazemonger。是的，这就是我说的，定义用户停止滚动的时候。 - gdoron

Answer 1

没有像“鼠标按下”和“鼠标松开”一样的“滚动开始”和“滚动结束”对： “滚动”事件更像是“刚刚发生的滚动”。如果在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/ （根据您的需求调整延迟时间，对我来说，在Chrome浏览器中150毫秒似乎是一个合理的设置。）

- nnnnnn

---

+1 我最喜欢这种方法，但是...你认为如果省略条件语句，每次触发滚动事件时重新启动超时，行为会更好吗？http://jsfiddle.net/hmMeL/ - net.uk.sweet

@net.uk.sweet - 是的，我同意。其实最初我没有加条件语句 - 不记得为什么改了，但我认为可能是只想在 addClass 周围放置条件语句。 - nnnnnn

是的，那很有道理。你认为在每个滚动事件中不必要地设置类是否会影响性能？ - net.uk.sweet

@net.uk.sweet：我已经更新了我的答案，将条件仅应用于addClass。这样做似乎非常顺畅，或者根本不需要条件，但我认为避免不必要的DOM访问是有好处的。如果出现性能问题，我会首先进行更改，而不是每次都获取新引用，而是缓存jQuery对象。 - nnnnnn

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/

- Blazemonger