web-dev-qa-db-fra.com

Comment savoir quand j'ai arrêté le défilement?

Comment savoir quand j'ai arrêté de faire défiler en utilisant Javascript?

javascriptscrolldom-events
38
krishna

Vous pouvez ajouter un gestionnaire d'événements pour l'événement scroll et démarrer un délai d'expiration. Quelque chose comme:

var timer = null;
$(window).addEventListener('scroll', function() {
    if(timer !== null) {
        clearTimeout(timer);        
    }
    timer = setTimeout(function() {
          // do something
    }, 150);
}, false);

Cela démarrera une temporisation et attendra 150 ms. Si un nouvel événement scroll s'est produit entre-temps, le temporisateur est abandonné et un nouveau est créé. Sinon, la fonction sera exécutée. Vous devrez probablement ajuster le timing.

Notez également que IE utilise une manière différente pour attacher des écouteurs d'événements, cela devrait donner une bonne introduction: quirksmode - Modèles d'enregistrement d'événements avancés

61
Felix Kling

Il n'y a pas d'événement "Défilement arrêté". Si vous voulez faire quelque chose après que l'utilisateur a fini de faire défiler, vous pouvez définir une minuterie dans l'événement "OnScroll". Si un autre événement "OnScroll" est déclenché, réinitialisez la minuterie. Lorsque la minuterie se déclenche enfin, vous pouvez supposer que le défilement est arrêté. Je pense que 500 millisecondes serait une bonne durée pour commencer.

Voici un exemple de code qui fonctionne dans IE et 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>
27
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 );

======= >>>> Exemple de travail ici

4
Muhammad Tahir

J'ai fait quelque chose comme ça:

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

le code est disponible ici: documentScrollEvents

2
sri_wb

Mise à jour mineure dans votre réponse. Utilisez la fonction de survol et de sortie de la souris.

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

        });

DÉMO

1
Ivin Raj

J'essayais également d'ajouter un affichage: propriété de bloc pour les icônes sociales qui était précédemment masquée lors de l'événement de défilement, puis à nouveau masquée après 2 secondes. Mais

Moi aussi, j'ai eu un même problème que mon code pour le délai d'attente après le premier défilement qui démarrerait automatiquement et je n'ai pas eu de réinitialisation de l'idée de délai d'attente. Comme il n'avait pas de fonction de réinitialisation appropriée, mais après avoir vu l'idée de David sur cette question, j'ai pu réinitialiser le délai d'expiration même si quelqu'un faisait à nouveau défiler avant de terminer le délai d'expiration précédent.

  1. code de problème indiqué ci-dessous avant de résoudre

     $ (fenêtre) .scroll (fonction () {
 setTimeout (fonction () {
 $ ('. fixed-class'). slideUp ('slow'); 
}, 2000); 
});

  1. code édité et fonctionnel avec réinitialisation de la minuterie si le prochain défilement se produit avant 2 secondes

     var timer = null; 
 $ (window) .scroll (function () {
 $ ('. fixed-class'). css ("display", "block" ); 
 if (timer! == null) {
 clearTimeout (timer);
    
} 
 timer = setTimeout (fonction () {
 $ ('. fixed-class'). slideUp ('slow'); 
}, 2000) ; 
 

    });

Mon code de travail déclenchera une division cachée de classe nommée "classe fixe" à afficher en bloc sur chaque défilement. Du début du dernier défilement, la minuterie comptera 2 secondes, puis changera de nouveau l'affichage de bloc à masqué.

1
Ahsit Tamang