it-swarm.com.de

Ereignis, wenn der Benutzer aufhört zu scrollen

Ich würde gerne ein paar fantastische jQuery-Sachen machen, wenn der Benutzer die Seite scrollt. Aber ich habe keine Ahnung, wie ich dieses Problem angehen soll, da es nur die scroll () -Methode gibt.

Irgendwelche Ideen?

48
dantz

Sie können festlegen, dass die scroll() ein Timeout hat, das bei jedem Scrollen des Benutzers überschrieben wird. Auf diese Weise wird das Skript ausgeführt, wenn er nach einer bestimmten Anzahl von Millisekunden stoppt. Wenn er jedoch in der Zwischenzeit einen Bildlauf durchführt, wird der Zähler erneut gestartet, und das Skript wartet, bis der Bildlauf abgeschlossen ist.

Update:

Da diese Frage wieder zu einer Aktion führte, dachte ich, ich könnte sie auch mit einer jQuery-Erweiterung aktualisieren, die ein scrollEnd-Ereignis hinzufügt

// extension:
$.fn.scrollEnd = function(callback, timeout) {          
  $(this).scroll(function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

// how to call it (with a 1000ms timeout):
$(window).scrollEnd(function(){
    alert('stopped scrolling');
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="height: 200vh">
  Long div
</div>

66
Stephan Muller

Hier ein einfaches Beispiel mit setTimeout, um eine Funktion auszulösen, wenn der Benutzer den Bildlauf stoppt:

(function() {        
    var timer;
    $(window).bind('scroll',function () {
        clearTimeout(timer);
        timer = setTimeout( refresh , 150 );
    });
    var refresh = function () { 
        // do stuff
        console.log('Stopped Scrolling'); 
    };
})();

Der Timer wird gelöscht, während das Scroll-Ereignis ausgelöst wird. Sobald der Bildlauf angehalten ist, wird die Aktualisierungsfunktion ausgelöst.

Oder als Plugin: 

$.fn.afterwards = function (event, callback, timeout) {
    var self = $(this), delay = timeout || 16;

    self.each(function () { 
        var $t = $(this);
        $t.on(event, function(){
            if ($t.data(event+'-timeout')) {
                clearTimeout($t.data(event+'-timeout'));
            }
            $t.data(event + '-timeout', setTimeout(function () { callback.apply($t); },delay));
        })
    });
    return this;
};

So rufen Sie einen Callback nach 100ms des letzten Scroll-Ereignisses in einem div (mit Namespace) ab:

$('div.mydiv').afterwards('scroll.mynamespace', function(e) {
        // do stuff when stops scrolling
        $(this).addClass('stopped');
    }, 100
);

Ich verwende dies zum Scrollen und zur Größenänderung. 

58
Phil M

Hier ist eine weitere generische Lösung, die auf den gleichen Ideen basiert:

var delayedExec = function(after, fn) {
    var timer;
    return function() {
        timer && clearTimeout(timer);
        timer = setTimeout(fn, after);
    };
};

var scrollStopper = delayedExec(500, function() {
    console.log('stopped it');
});

document.getElementById('box').addEventListener('scroll', scrollStopper);
9
xat

Warum so kompliziert? Wie aus der Dokumentation hervorgeht, funktioniert diese http://jsfiddle.net/x3s7F/9/ !

$('.frame').scroll(function() {
 $('.back').hide().fadeIn(100);
}

http://api.jquery.com/scroll/ .


Hinweis: Das Ereignis scroll in Windows Chrome unterscheidet sich von allen anderen. Sie müssen schnell blättern, um das gleiche Ergebnis wie in z. FF. Schauen Sie sich https://liebdich.biz/back.min.js die "X" -Funktion an.

Einige Erkenntnisse aus meinem how many ms a scroll event-Test:

  • Safari, Mac FF, Mac Chrome: ~ 16ms ein Ereignis.
  • Windows FF: ~ 19ms ein Ereignis.
  • Windows Chrome: Bis zu ~ 130ms ein Ereignis, wenn Sie langsam scrollen.
  • Internet Explorer: bis zu ~ 110ms ein Ereignis.

http://jsfiddle.net/TRNCFRMCN/1Lygop32/4/ .

2
loveNoHate

Ich hatte die Notwendigkeit, onScrollEnd event zu besprechen, die ebenfalls besprochen wurden.

Ich implementiere dies mit JavaScript Module Pattern :

var WindowCustomEventsModule = (function(){

    var _scrollEndTimeout = 30;

    var _delayedExec = function(callback){
        var timer;
        return function(){
            timer && clearTimeout(timer);
            timer = setTimeout(callback, _scrollEndTimeout);
        }
    };

    var onScrollEnd = function(callback) { 
        window.addEventListener('scroll', _delayedExec(callback), false);         
    };

    return {
        onScrollEnd: onScrollEnd
    }
})();

// usage example
WindowCustomEventsModule.onScrollEnd(function(){
    //
    // do stuff
    //
});

Hoffe, das hilft jemand/inspiriert

1

Es gibt Scrollstart- und Scrollstop-Funktionen, die Teil von Jquery Mobile sind. 

Beispiel mit Scrollstop:

$(document).on("scrollstop",function(){
   alert("Stopped scrolling!");
});

Hoffe das hilft jemandem.

1
Dima

Es gibt kein solches Ereignis wie 'scrollEnd'. Ich empfehle Ihnen, den von scroll() zurückgegebenen Wert (in 200ms) mit setInterval zu überprüfen und das Delta zwischen dem aktuellen und dem vorherigen Wert aufzuzeichnen. Wenn das Delta zu Null wird, können Sie es als Ihr Ereignis verwenden.

0
dpq

Ich habe etwas Code aus einem schnellen Stück gezogen, das ich als Beispiel zusammengeschustert habe (beachten Sie, dass scroll.chain ein Objekt ist, das zwei Arrays start und end enthält, die Container für die Rückruffunktionen sind). Beachten Sie auch, dass ich hier jQuery verwende und unterstreiche.

$('body').on('scroll', scrollCall);
scrollBind('end', callbackFunction);
scrollBind('start', callbackFunction);

var scrollCall = function(e) {
    if (scroll.last === false || (Date.now() - scroll.last) <= 500) {
        scroll.last = Date.now();
        if (scroll.timeout !== false) {
            window.clearTimeout(scroll.timeout);
        } else {
            _(scroll.chain.start).each(function(f){
                f.call(window, {type: 'start'}, e.event);
            });
        }
        scroll.timeout = window.setTimeout(self.scrollCall, 550, {callback: true, event: e});
        return;
    }
    if (e.callback !== undefined) {
        _(scroll.chain.end).each(function(f){
            f.call(window, {type: 'end'}, e.event);
        });
        scroll.last = false;
        scroll.timeout = false;
    }
};

var scrollBind = function(type, func) {
    type = type.toLowerCase();
    if (_(scroll.chain).has(type)) {
        if (_(scroll.chain[type]).indexOf(func) === -1) {
            scroll.chain[type].Push(func);
            return true;
        }
        return false;
    }
    return false;
}
0
whoughton