Javascript – Scroll-Ende-Ereignis
伊谢尔伦
伊谢尔伦 2017-06-14 10:54:32
0
3
1111

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伐。

Antworte allen(3)
淡淡烟草味

把结束 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);  
学习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) );
        }
    };
 
})();
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage