it-swarm.com.de

jQuery - Bindungsereignis für Bildlaufstopp

Wenn ich ein Ereignis auf Seitenblättern binden möchte, kann ich scroll(); verwenden.

Aber wie soll gefeuert werden, wenn scroll() beendet ist?

Ich möchte das gerne reproduzieren:

   $(window).scroll(function(){
    //do somenthing
    });

    $(window).scrollSTOPPED(function(){  //--> when i'm scrolling then i stop to scrolling (so NOT when page scrollbar is at the end top or bottom :)
    //do somenthing else
    });

irgendwelche Ideen?

16
itsme

winziger Jquery-Weg

$.fn.scrollStopped = function(callback) {
  var that = this, $this = $(that);
  $this.scroll(function(ev) {
    clearTimeout($this.data('scrollTimeout'));
    $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
  });
};

250 Sekunden nach dem letzten Bildlaufereignis wird der Callback "scrollStopped" aufgerufen.

http://jsfiddle.net/wtRrV/256/

lodash (noch kleiner)

function onScrollStopped(domElement, callback) {
  domElement.addEventListener('scroll', _.debounce(callback, 250));
}

http://jsfiddle.net/hotw1o2j/

pure js (technisch am kleinsten)

function onScrollStopped(domElement, callback, timeout = 250) {
  domElement.addEventListener('scroll', () => {
    clearTimeout(callback.timeout);
    callback.timeout = setTimeout(callback, timeout);
  });
}

https://jsfiddle.net/kpsxdcv8/15/

seltsame Tatsache

clearTimeout und clearInterval-Parameter müssen nicht definiert werden und können sogar falsche Typen sein oder sogar weggelassen werden.

http://jsfiddle.net/2w5zLwvx/

39
Jason Sebring

das Ereignis selbst existiert nicht, da scroll ein einzelnes Ereignis ist, das jedes Mal ausgelöst wird, wenn der Benutzer einen Bildlauf um ein bestimmtes Inkrement durchführt.

Sie können das Ereignis jedoch emulieren.

Wir danken James Padolsey dafür, der von seiner Webseite aufgehoben wurde: Lesen Sie hier, um den Code und seine Implementierung vollständig zu verstehen.

http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

(Funktion(){

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

Wahrscheinlich ist es erwähnenswert, dass es mehrere Fragen gibt, die sich auf Ihre beziehen, sodass dies eine mögliche Wiederholung sein kann. z.B. Javascript: Aktion ausführen, nachdem der Benutzer das Scrollen beendet hat und Ereignis auslösen, nachdem Bildlaufleisten oder Mausrad mit Javascript gescrollt wurden

2
OAC Designs

Sie können überprüfen, ob window.scrollY == 0

$(window).scroll(function(){
  if (window.scrollY == 0) {
    //...
  }
});

Dieses Ereignis wird jedoch bei jeder Schriftrolle ausgelöst.

0
Cidiomar

Ich ziehe es vor, auf einer Veranstaltung zu hören. Das ist was ich mache:

Das Jquery-Plugin:

+function(jQuery){
        var scrollStopEventEmitter = function(element, jQuery) {
            this.scrollTimeOut = false;
            this.element       = element;
            jQuery(element).on('scroll', $.proxy(this.onScroll, this));
        }

        scrollStopEventEmitter.prototype.onScroll = function() 
        {
            if (this.scrollTimeOut != false) {
              clearTimeout(this.scrollTimeOut);
            }

            var context = this;

            this.scrollTimeOut = setTimeout(function(){ context.onScrollStop()}, 250);
        }

        scrollStopEventEmitter.prototype.onScrollStop = function() 
        {
            this.element.trigger('scrollStop');
        }

        jQuery.fn.scrollStopEventEmitter = function(jQuery) {   
            return new scrollStopEventEmitter(this, jQuery);
        };

    }($);

In diesem Fall löst das Fenster jetzt das scrollStop-Ereignis aus

$(window).scrollStopEventEmitter($);

Jetzt kann ich auf scrollStop hören

$(window).on('scrollStop',function(){
        // code
0
Frederic Nault