jquery - 在滚动期间添加一个类

Question

有没有办法仅在滚动特定 div 期间执行功能（即添加类、删除类...）。

例如

如果我有一个高度为 1000 像素的 div 并且溢出：自动属性。我喜欢只在滚动时添加一个类。如果用户停止在 div 内滚动，则必须删除该类。

有什么方法可以将 jquery 写入此函数...

Answer 1

是的，几乎所有东西都可以放在.scroll()jQuery 的事件处理程序中。

http://api.jquery.com/scroll/

并检测停止检查这篇文章：

使用 javascript 滚动滚动条或鼠标滚轮后触发事件

您基本上设置了一个超时来检查您是否仍在滚动，如果没有触发停止滚动事件

编辑：实施很有趣

var scrollChecker = null;
var scrollTimeout = null;

var createScrollEvents = function (e) {
    var $this = $(this);
    $this.data('scrolling', true);
    if (!scrollChecker) {
        $this.trigger('scrollStart');
        scrollChecker = setInterval(function () {
            if (!$this.data('scrolling')) {
                $this.trigger('scrollStop');
                clearTimeout(scrollChecker);
                scrollChecker = null;
            }
        }, 200);
    }
    $this.trigger('scrolling');
    if (scrollTimeout) {
        clearTimeout(scrollTimeout);
    }
    scrollTimeout = setTimeout(function () {
        $this.data('scrolling', false);
    }, 200);
};

$(function () {

    $('#mydiv')

        //init
        .scroll(createScrollEvents)

        //events
        .on('scrollStart', function (e) {
            console.log('start');
        })

        .on('scrollStop', function (e) {
            console.log('stop');
        })

        .on('scrolling', function (e) {
            console.log('scrolling');
        });
        //end
});

CSS

#mydiv {
    width:200px;
    height:200px;
    overflow : auto;
}

不要忘记这一点，请阅读.scroll()文档：

它适用于窗口对象，也适用于overflowCSS 属性设置为的可滚动框架和元素scroll（或者auto当元素的显式高度或宽度小于其内容的高度或宽度时）。

http://jsfiddle.net/techunter/LxTqY/

Answer 2

演示

您可以使用 Jquery .scroll()，但overflowCSS 属性设置为scroll（或者auto当元素的显式高度或宽度小于其内容的高度或宽度时）。

或者

您可以使用window.onscroll事件

Answer 3

$('#target').scroll(function() {
$('.ClassName').removeClass(ClassName);
$(this).addClass(ClassName);
});