需求滚动显示隐藏,需求就是: 滚动时菜单隐藏,滚动停止时菜单显示,但是不知道怎么监听scroll结束事件,求解惑
小伙看你根骨奇佳,潜力无限,来学PHP伐。
把结束 handler 放在 scroll 事件中不断延时处理,scroll 事件停了之后就会触发。
var scrollTimer const timeout = 400 function handler () { // ... } document.addEventListener('scroll', () => { clearTimeout(scrollTimer) scrollTimer = setTimeout(handler, timeout) })
雷雷
可以考虑使用touch来模拟scroll,然后使用touchend。如果一定要使用scroll,那就在scroll的回调中做延时处理,以jQuery为例。
touch
scroll
touchend
jQuery
(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) ); } }; })();
把结束 handler 放在 scroll 事件中不断延时处理,scroll 事件停了之后就会触发。
雷雷
可以考虑使用
touch
来模拟scroll
,然后使用touchend
。如果一定要使用
scroll
,那就在scroll
的回调中做延时处理,以jQuery
为例。