javascript - scroll end event

Question

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

Answer 1

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)
})

Answer 2

    // 防抖动函数  
    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);  

Answer 3

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) );
        }
    };
 
})();