Question

有没有办法执行一个函数（即Add Class，Remove Class ...）仅在滚动期间特定div。

例如

如果我有一个高度为1000px且溢出的div：auto   属性。我喜欢在滚动时添加一个类。如果   用户停止在必须删除类的div内滚动。

有没有办法将jquery写入此函数...

Answer 1

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

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

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

Fire event after scrollling scrollbars or mousewheel with javascript

你基本上设置一个Timeout来检查你是否还在滚动，如果没有触发停止的滚动事件

编辑：实施起来很有趣

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()文档：

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

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

Answer 2

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

Answer 3

<强> Demo

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

或

您可以使用window.onscroll活动

在滚动期间添加课程

3 个答案: