Javascript – Scroll-Ende-Ereignis

Question

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

Answer 1

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

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

可以考虑使用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) );
        }
    };
 
})();