扩展jquery scroll事件,支持 scroll start 和 scroll stop

参考地址:

http://www.ghugo.com/special-scroll-events-for-jquery/

javascript里有一个事件是滚动事件,只要拖动滚动条,就会触发事件。

用jquery的话,这个事件scroll 可以查看jquery api :http://api.jquery.com/scroll/

但scroll 事件有一个缺陷,就是只能判断滚动条滚动,而不能监控滚动条停止滚动时的事件。

现用jquery扩展一下scroll 事件,新增

不多说,直接上代码实在点。

(function(){

    var special = jQuery.event.special,
        uid1 = ‘D‘ + (+new Date()),
        uid2 = ‘D‘ + (+new Date() + 1);

    special.scrollstart = {
        setup: function() {

            var timer,
                handler =  function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = ‘scrollstart‘;
                        jQuery.event.handle.apply(_self, _args);
                    }

                    timer = setTimeout( function(){
                        timer = null;
                    }, special.scrollstop.latency);

                };

            jQuery(this).bind(‘scroll‘, handler).data(uid1, handler);

        },
        teardown: function(){
            jQuery(this).unbind( ‘scroll‘, jQuery(this).data(uid1) );
        }
    };

    special.scrollstop = {
        latency: 300,
        setup: function() {

            var timer,
                    handler = function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    }

                    timer = setTimeout( function(){

                        timer = null;
                        evt.type = ‘scrollstop‘;
                        jQuery.event.handle.apply(_self, _args);

                    }, special.scrollstop.latency);

                };

            jQuery(this).bind(‘scroll‘, handler).data(uid2, handler);

        },
        teardown: function() {
            jQuery(this).unbind( ‘scroll‘, jQuery(this).data(uid2) );
        }
    };

})();

可以将上面代码保存到一个文件,这相当于一个插件,呵呵。调用方法如下:

(function(){
    jQuery(window).bind(‘scrollstart‘, function(){
        console.log("start");
    });

    jQuery(window).bind(‘scrollstop‘, function(e){
        console.log("end");
    });

})();
时间: 2024-12-31 03:08:46

扩展jquery scroll事件,支持 scroll start 和 scroll stop的相关文章

“如何稀释scroll事件”引出的问题

背景:我在segmentfault提了个问题如何稀释onscroll事件,问题如下: 面试时问到这个问题,是这样的:    面试官问一个关于滚动到某个位置的时候出现一个顶部的导航栏,答完之后,她接着问一滚动onscroll就会执行很多很多次,如何稀释它?为了确定她说的是“稀释”,我让她重复了遍,我给出的解决方法是,用一个变量,在事件处理的时候让它自增,判断达到一定大小就执行一次实际的事件: var i = 0; // 累积变量 window.onscroll = function(){ i++;

jQuery scroll事件实现监控滚动条分页示例(转)

这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可以参考下. scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 1 $(document).ready(function () { //本人习惯这样写了 2 $(window).scroll(function () { 3 //

jQuery事件:scroll事件

scroll事件:滚动元素时或者是使用scroll()方法会触发scroll事件 scroll()方法 触发选中元素的scroll事件 $(selector).scroll()//无参数 规定scroll事件被触发后的函数 $(selector).scroll( function ) function:js Function对象 详情

jquery scroll事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>scroll Demo</title

javascript中的scroll事件

window.addEventListener('scroll',function(){ if(document.compatMode == "CSS1Compat") { alert(document.documentElement.scrollTop); } else { alert(document.body.scrollTop); } },false); 虽然scroll事件是在window对象上发生的,但它事件表示的则是页面中相应元素的变化.在混杂模式中,可以通过<bo

Scroll事件不能取消冒泡问题

mdn上写了,scroll事件冒泡并不能被取消:https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event 我当前遇到一个业务就是,在h5页面内,整个页面需要支持上下滑(touchstart/touchmove/touchend,changePage())切换页面,又要支持页面内某个区域内(scrollRegion)可以滚动(scroll)查看list. 一旦scroll,一定会被冒泡到touchstart/tou

scroll事件实现监控滚动条并分页显示示例(zepto.js)

scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页底部自动加载下一页并发加载埋点. 实现:首先理解三个概念,分别是contentH,viewH,scrollTop. contentH:即所要滑动的元素内容的高度,包括可见部分以及滚动条下面的不可见部分. ViewH:即我们看到的这个DIV的高度,不包括可见部分也不包括滚动条下面的不可见部分. scr

“如何稀释scroll事件”的思考

看了下园友的一帖子:http://www.cnblogs.com/xzhang/p/4145697.html#commentform 本来以为是很简单的问题,但仔细想想还挺有意思的.简单的说就是增加事件触发的间隔时间. 比如在浏览器状态了事件是1毫秒调用一次,转换成100毫秒调用一次. 看了下原贴的两方法,觉得可以乐观锁的方法再写个,结果对比后发觉和typeahead差不多.贴下代码和测试页面.看那位能指点下写的更好.:) var _lazyRun = function (func, wait)

scroll事件在IE,chrome,FF中的行为表现

周末想做一个滚动加载图片的效果.在IE,chrome,FF中验证时,忽然发现了一个有趣的问题. 问题是这样的: 1.     我发现鼠标滚动一次,scroll事件的处理函数执行的次数不一样. 2.     滚动的距离也不一样. 3.     点击滚动条滚动时,执行次数,滚动距离也不一样. 经过验证:        执行次数: 在IE5,6,7,8下,滚动一次,函数执行4次: 在IE9,10以上版本执行1次: 在chrome下,只执行一次.(chrome版本号:34.0.1847.116 m) 在