监听屏幕滚动开始和结束事件(scroll start 和scroll stop)

最新推荐文章于 2024-06-25 09:29:12 发布

wh_xmy

最新推荐文章于 2024-06-25 09:29:12 发布

阅读量5.1k

点赞数 1

分类专栏： js web前端随笔文章标签： jQuery扩展 scroll start scroll stop 监听滚动

本文链接：https://blog.csdn.net/wh_xmy/article/details/96098571

版权

js 同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

web前端

7 篇文章 0 订阅

订阅专栏

随笔

4 篇文章 0 订阅

订阅专栏

背景：最近在写一个专题页，产品要求右边导航栏在滑动的时候收起，滑动停止时显示，这样就需要监听到屏幕滚动（scroll start）事件和滚动结束(scroll end)事件，但是又不能为了这个功能专门引入jQuery mobile这个库，所以找到以下方法进行实现，基于jQuery 封装的插件。

解决方案：（jQuery1.9版本及以后）插件代码如下

/**
 * 函数：scrollstart，scrollstop
 * 描述：监听滚动条滚动或停止
 * 注意：如果是用高级版本的jquery（如1.9）的话需要将handle改为dispatch，这里已经改成了dispotch
 */
(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.dispatch.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.dispatch.apply(_self, _args);

                    }, special.scrollstop.latency);

                };

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

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

})();

考虑兼容低版本jQuery只需将上述代码中的dispatch改为handle即可，具体代码如下：

(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) );
        }
    };
 
})();

使用方法：以上代码可保存在一个js文件中，作为一个插件使用，具体调用方法如下：

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

注：如果是用高级版本的jquery（如1.9及以上）的话，使用第一个插件，兼容低版本的话使用第二个插件，调用方法相同。

希望对你有所帮助，如有疑问，欢迎评论区留言。