扫码关注官方订阅号
需求滚动显示隐藏,需求就是: 滚动时菜单隐藏,滚动停止时菜单显示,但是不知道怎么监听scroll结束事件,求解惑
小伙看你根骨奇佳,潜力无限,来学PHP伐。
把结束 handler 放在 scroll 事件中不断延时处理,scroll 事件停了之后就会触发。
var scrollTimer const timeout = 400 function handler () { // ... } document.addEventListener('scroll', () => { clearTimeout(scrollTimer) scrollTimer = setTimeout(handler, timeout) })
// 防抖动函数 function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate & !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; var myEfficientFn = debounce(function() { // 滚动中的真正的操作 }, 250); // 绑定监听 window.addEventListener('scroll', myEfficientFn);
可以考虑使用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) ); } }; })();
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
把结束 handler 放在 scroll 事件中不断延时处理,scroll 事件停了之后就会触发。
可以考虑使用
touch
来模拟scroll
,然后使用touchend
。如果一定要使用
scroll
,那就在scroll
的回调中做延时处理,以jQuery
为例。