javascript - scroll end event
伊谢尔伦
伊谢尔伦 2017-06-14 10:54:32
0
3
1107

The requirement is to hide the scrolling display. The requirement is: the menu is hidden when scrolling, and the menu is displayed when scrolling stops. But I don’t know how to monitor the scroll end event. Please solve my doubts

伊谢尔伦
伊谢尔伦

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

reply all(3)
淡淡烟草味

Put the end handler in the scroll event for continuous delay processing. It will be triggered after the scroll event stops.

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);  
学习ing

Consider using touch to simulate scroll, and then use touchend.
If you must use scroll, then do delay processing in the callback of scroll, take jQuery as an example.

(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) );
        }
    };
 
})();
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template