javascript - événement de fin de défilement

Question

Il est nécessaire d'afficher et de masquer le défilement. La condition est la suivante : le menu est masqué lors du défilement et le menu s'affiche lorsque le défilement s'arrête. Cependant, je ne sais pas comment surveiller l'événement de fin de défilement.

Answer 1

Placez le gestionnaire de fin dans l'événement scroll pour un traitement de retard continu. Il sera déclenché après l'arrêt de l'événement scroll.

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

Answer 2

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

Answer 3

Vous pouvez envisager d'utiliser touch来模拟scroll，然后使用touchend。
如果一定要使用scroll，那就在scroll的回调中做延时处理，以jQuery comme exemple.

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

})();</code>