javascript - scroll结束事件
伊谢尔伦
伊谢尔伦 2017-06-14 10:54:32
0
3
1036

需求滚动显示隐藏,需求就是: 滚动时菜单隐藏,滚动停止时菜单显示,但是不知道怎么监听scroll结束事件,求解惑

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复 (3)
淡淡烟草味

把结束 handler 放在 scroll 事件中不断延时处理,scroll 事件停了之后就会触发。

var scrollTimer const timeout = 400 function handler () { // ... } document.addEventListener('scroll', () => { clearTimeout(scrollTimer) scrollTimer = setTimeout(handler, timeout) })
    迷茫

    雷雷

      学习ing

      可以考虑使用touch来模拟scroll,然后使用touchend
      如果一定要使用scroll,那就在scroll的回调中做延时处理,以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) ); } }; })();
        最新下载
        更多>
        网站特效
        网站源码
        网站素材
        前端模板
        关于我们 免责声明 Sitemap
        PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!