Es ist erforderlich, das Scrollen anzuzeigen und auszublenden. Das Menü wird beim Scrollen ausgeblendet und das Menü wird angezeigt, wenn das Scrollen angehalten wird. Bitte lösen Sie meine Zweifel
小伙看你根骨奇佳,潜力无限,来学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) ); } }; })();
把结束 handler 放在 scroll 事件中不断延时处理,scroll 事件停了之后就会触发。
可以考虑使用
touch
来模拟scroll
,然后使用touchend
。如果一定要使用
scroll
,那就在scroll
的回调中做延时处理,以jQuery
为例。