Woher weiß ich, wenn ich mit dem Scrollen von Javascript aufgehört habe?

Woher weiß ich, Wann habe ich aufgehört zu scrollen mit Javascript

Vielen Dank

InformationsquelleAutor der Frage krishna | 2011-01-06

48

Können Sie fügen Sie einen Ereignishandler für das scroll Ereignis und der start zu einem timeout. So etwas wie:
```
var timer = null;
$(window).addEventListener('scroll', function() {
    if(timer !== null) {
        clearTimeout(timer);        
    }
    timer = setTimeout(function() {
          //do something
    }, 150);
}, false);
```
Dadurch wird ein timeout und warten 150mm. Wenn eine neue scroll Ereignis aufgetreten ist in der Zwischenzeit, wird der timer abgebrochen und eine neue erstellt. Wenn nicht, wird die Funktion ausgeführt. Sie wahrscheinlich haben so korrigieren Sie das timing.

Beachten Sie auch, dass der IE verwendet eine andere Möglichkeit zum befestigen von Ereignis-Listenern, diese sollte eine gute Einführung: quirksmode - Erweiterte event-Registrierung-Modelle

InformationsquelleAutor der Antwort Felix Kling

Gibt es nicht ein "Beendet Scrolling" - Ereignis. Wenn Sie wollen, etwas zu tun, nachdem der Benutzer beendet hat, zu Blättern, können Sie einen timer einstellen, in der "OnScroll" - Ereignis. Wenn man eine andere "OnScroll" Ereignisses, das ausgelöst wird, dann den timer zurückzusetzen. Wenn der timer dann auch das Feuer, dann kannst du davon ausgehen das scrollen gestoppt. Ich würde denken, dass 500 Millisekunden wäre eine gute Dauer, um mit zu beginnen.

Hier einige Beispiel-code, das funktioniert in IE und Chrome:

<html>
<body onscroll="bodyScroll();">

<script language="javascript">
    var scrollTimer = -1;

    function bodyScroll() {
        document.body.style.backgroundColor = "white";

        if (scrollTimer != -1)
            clearTimeout(scrollTimer);

        scrollTimer = window.setTimeout("scrollFinished()", 500);
    }

    function scrollFinished() {
        document.body.style.backgroundColor = "red";
    }
</script>

<div style="height:2000px;">
Scroll the page down.  The page will turn red when the scrolling has finished.
</div>

</body>
</html>

InformationsquelleAutor der Antwort David

(function( $ ) {
        $(function() {
            var $output = $( "#output" ),
                scrolling = "<span id='scrolling'>Scrolling</span>",
                stopped = "<span id='stopped'>Stopped</span>";
                $( window ).scroll(function() {
                    $output.html( scrolling );
                    clearTimeout( $.data( this, "scrollCheck" ) );
                    $.data( this, "scrollCheck", setTimeout(function() {
                        $output.html( stopped );
                    }, 250) );

                });
        });
    })( jQuery );

=======>>>>
Beispiel hier

InformationsquelleAutor der Antwort Muhammad Tahir

Habe ich so etwas wie dieses:

var scrollEvents = (function(document, $){

    var d = {
        scrolling: false,
        scrollDirection : 'none',
        scrollTop: 0,
        eventRegister: {
            scroll: [],
            scrollToTop: [],
            scrollToBottom: [],
            scrollStarted: [],
            scrollStopped: [],
            scrollToTopStarted: [],
            scrollToBottomStarted: []
        },
        getScrollTop: function(){ 
            return d.scrollTop;
        },
        setScrollTop: function(y){
            d.scrollTop = y;
        },
        isScrolling: function(){
            return d.scrolling;
        },
        setScrolling: function(bool){
            var oldVal = d.isScrolling();
            d.scrolling = bool;
            if(bool){
                d.executeCallbacks('scroll');
                if(oldVal !== bool){
                    d.executeCallbacks('scrollStarted');
                }
            }else{
                d.executeCallbacks('scrollStopped');
            }
        },
        getScrollDirection : function(){
            return d.scrollDirection;
        },
        setScrollDirection : function(direction){
            var oldDirection = d.getScrollDirection();
            d.scrollDirection = direction;
            if(direction === 'UP'){
                d.executeCallbacks('scrollToTop');
                if(direction !== oldDirection){
                    d.executeCallbacks('scrollToTopStarted');
                }
            }else if(direction === 'DOWN'){
                d.executeCallbacks('scrollToBottom');
                if(direction !== oldDirection){
                    d.executeCallbacks('scrollToBottomStarted');
                }
            }
        },
        init : function(){
            d.setScrollTop($(document).scrollTop());
            var timer = null;
            $(window).scroll(function(){
                d.setScrolling(true);
                var x = d.getScrollTop();
                setTimeout(function(){
                    var y = $(document).scrollTop();
                    d.setScrollTop(y);
                    if(x > y){
                        d.setScrollDirection('UP');
                    }else{
                        d.setScrollDirection('DOWN');
                    }
                }, 100);
                if(timer !== 'undefined' && timer !== null){
                    clearTimeout(timer);
                }
                timer = setTimeout(function(){
                    d.setScrolling(false);
                    d.setScrollDirection('NONE');
                }, 200);
            });
        },
        registerEvents : function(eventName, callback){
            if(typeof eventName !== 'undefined' && typeof callback === 'function' && typeof d.eventRegister[eventName] !== 'undefined'){
                d.eventRegister[eventName].push(callback);
            }
        },
        executeCallbacks: function(eventName){
            var callabacks = d.eventRegister[eventName];
            for(var k in callabacks){
                if(callabacks.hasOwnProperty(k)){
                    callabacks[k](d.getScrollTop());
                }
            }
        }
    };
    return d;

})(document, $);

der code ist hier: documentScrollEvents

InformationsquelleAutor der Antwort sri_wb

Kleines update in deine Antwort. Verwenden Sie die mouseover und out-Funktion.

 $(document).ready(function() {
           function ticker() {
    $('#ticker li:first').slideUp(function() {
        $(this).appendTo($('#ticker')).slideDown();
    });
}

var ticke= setInterval(function(){ 
                            ticker(); 
            }, 3000);
       $('#ticker li').mouseover(function() { 
          clearInterval(ticke);
      }).mouseout(function() { 
          ticke= setInterval(function(){ ticker(); }, 3000);
        });

        });

DEMO

InformationsquelleAutor der Antwort Ivin Raj

0

War ich versucht zu fügen Sie eine display:block-Eigenschaft für soziale Symbole, die zuvor verborgen auf scroll-Ereignis und dann wieder ausblenden, nachdem 2seconds. Aber

Auch ich hatte das gleiche problem wie mein code für das timeout nach dem ersten durchblättern würde automatisch starten und nicht hatten reset-timeout-Idee. Wie es hatte keine richtige reset-Funktion.Aber nachdem ich sah David die Idee, auf diese Frage bin ich in der Lage war zu reset-timeout-selbst wenn jemand wieder gescrollt eigentlich vor Abschluss der vorherigen timeout.
1. problem code gezeigt unten, bevor Sie sich der Lösung des
```
$(window).scroll(function(){ 
setTimeout(function(){ 
$('.Feste-Klasse').slideUp('slow'); 
},2000); 
}); 
```
1. bearbeitet und funktionierenden code mit reset-timer, wenn die nächste scroll tritt auf, bevor 2s
```
var timer=null; 
$(window).scroll(function(){ 
$('.Feste-Klasse').css("display", "block"); 
if(timer !== null) { 
clearTimeout(timer);
 
} 
timer=setTimeout(function(){ 
$('.Feste-Klasse').slideUp('slow'); 
},2000); 

});
```
Meinen funktionierenden code löst eine versteckte Teilung der Klasse mit dem Namen "fixed-class', um in der show-block auf allen Blättern. Vom start des neuesten Blättern der timer zählen, 2 Sekunden und dann wieder ändern Sie das display von block zu versteckt.

InformationsquelleAutor der Antwort Ahsit Tamang

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.