Ereignis, wenn der Benutzer den Bildlauf stoppt

Ich würde gerne ein paar fancy jQuery-Sachen, wenn der Benutzer führt einen Bildlauf auf der Seite. Aber ich habe keine Ahnung, wie dieses problem angegangen werden, da nur die scroll () - Methode.

Irgendwelche Ideen?

InformationsquelleAutor der Frage dantz | 2010-09-13

Hier ist ein einfaches Beispiel mit setTimeout Feuer eine Funktion, wenn der Benutzer beendet scrolling:

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

Wird der timer gelöscht wird, während das scroll-Ereignis ausgelöst. Sobald das scrollen aufhört, die refresh-Funktion ausgelöst wird.

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

Feuer Rückruf nach 100ms der letzten scroll-Ereignis auf ein div (mit namespace):

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

Ich benutze diese für scrollen und vergrößern.

InformationsquelleAutor der Antwort Phil M

Hier ist eine weitere, generische Lösung basierend auf den gleichen Ideen erwähnt:

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

InformationsquelleAutor der Antwort xat

2

Warum so kompliziert? Die Dokumentation weist darauf hin, diese http://jsfiddle.net/x3s7F/9/ funktioniert!
```
$('.frame').scroll(function() {
 $('.back').hide().fadeIn(100);
}
```
http://api.jquery.com/scroll/.

Hinweis: Die scroll Ereignis auf Windows Chrome ist anders als alle anderen. Sie müssen scrollen Sie schnell zu bekommen sind die gleichen, die als Ergebnis, wie in z.B. FF. Blick auf https://liebdich.biz/back.min.js die "X" - Funktion.

Einige Erkenntnisse aus meiner 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 das scrollen langsam.
- Internet Explorer: bis zu ~110ms ein Ereignis.
http://jsfiddle.net/TRNCFRMCN/1Lygop32/4/.

InformationsquelleAutor der Antwort loveNoHate
1

Gibt es scrollstart und scrollstop Funktionen, die Teil von jquery mobile.

Beispiel mit scrollstop:
```
$(document).on("scrollstop",function(){
   alert("Stopped scrolling!");
});
```
Hoffe, das jemand hilft.

InformationsquelleAutor der Antwort Dima

Hatte ich das Bedürfnis, zu implementieren onScrollEnd Veranstaltung diskutiert so gut hören.
Die Idee der Verwendung von timer funktioniert für mich.

Ich diese umsetzen 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 wird helfen /jemanden inspirieren

InformationsquelleAutor der Antwort Martin Kuzdowicz

0

Gibt es keine solche Veranstaltung als 'scrollEnd'. Ich empfehle, dass Sie überprüfen den Rückgabewert von scroll() jeder einmal in eine Weile (sagen wir mal 200ms) mit setInterval Sie, und notieren Sie das delta zwischen dem aktuellen und dem vorherigen Wert. Wenn die delta-null wird, können Sie es verwenden, wie Ihre Veranstaltung.

InformationsquelleAutor der Antwort dpq

Zog ich einige code, der aus einem schnellen Stück, das ich zusammen gebastelt, die dies als ein Beispiel (beachten Sie, dass Sie die Navigationstaste.Kette ist ein Objekt mit zwei arrays, die start-und end -, Container für die callback-Funktionen). Beachten Sie auch, dass ich mich mit jQuery und underscore hier.

$('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;
}

InformationsquelleAutor der Antwort whoughton

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.