擴充jquery scroll事件，支援 scroll start 和 scroll stop

標籤：外掛程式   nbsp   拖動   滾動事件   捲軸   data   rip   for   class   

參考地址：

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

 

擴充jquery scroll事件，支援 scroll start 和 scroll stop