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

效果预览：

github:

https://besswang.github.io/webapp-scroll/

参考地址：

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（如1.9）的话需要将handle改为dispatch

转载于:https://www.cnblogs.com/wang715100018066/p/7147208.html

扩展jquery scroll事件，支持 scroll start 和 scroll stop相关推荐

jQuery常见事件
JQuery几种常用事件 1.事件ready(fn) 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件.通俗的来讲就是当页面加载完时就会执行此函数事件 ...
jQuery scroll事件
前言 jquery 3.5.1 scroll事件 <html> <header> <script crossorigin="anonymous" in ...
php滚动加载分页,jQuery scroll事件实现监控滚动条分页实例详解
这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...
jquery插件（二）：Infinite Scroll–无限分页
一.前言现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个" ...
scroll事件实现监控滚动条并分页显示示例（zepto.js）
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
关于mousemove和scroll事件的一点技巧
当我们为某元素绑定mousemove事件或者scroll后,一旦鼠标移动或滚动条滚动就会触发大量的事件,就像这样. 移动鼠标横穿过红色框. 将滚动条从顶部滚动到底部. 如果是实现拖动效果,当然我们需要 ...
html页面滚动条监听事件,滚动条的scroll事件
在vb中,滚动条的scroll 事件和change 事件的区别scroll和change的区别为:指代不同.用法不同.侧重点不同一.指代不同 scroll:滚屏,滚动. change:变更,变革. ...
scroll事件详解
以前眼高手低,不够扎实,面试的时候总是处理过,却想不出来细节,这次开始慢慢整理,蜗牛继续爬坡 CSS 一般情况下,如果出现内容大于浏览器的时候,需要添加样式 overflow:scroll 关于sc ...
元素滚动 scroll 与 scroll 事件
scroll 翻译过来就是滚动的意思,我们使用 scroll 的相关属性可以得到元素大小与滚动距离等等 scroll 的相关属性: element.scrollTop:返回滚动后被卷上去的距离,返回值 ...

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

扩展jquery scroll事件，支持 scroll start 和 scroll stop相关推荐

最新文章

热门文章