Evento cuando el usuario deja de moverse

Que me gustaría hacer algún capricho de jQuery cuando el usuario se desplaza por la página. Pero no tengo idea de cómo hacer frente a este problema, ya que no es sólo el scroll() método.

Alguna idea?

InformationsquelleAutor dantz | 2010-09-13

8 Kommentare

  1. 70

    Puede hacer que el scroll() tienen un tiempo de espera que se sobrescribe cada una de las veces que el usuario se desplaza. De esa manera, cuando se detiene después de una cierta cantidad de milisegundos que se ejecuta el script, pero si se desplaza en el mientras tanto, el contador volverá a empezar de nuevo y el script va a esperar hasta que él se hace de desplazamiento de nuevo.

    Actualización:

    Debido a que esta pregunta recibió alguna acción de nuevo pensé que bien podría actualizar con una extensión de jQuery que añade un scrollEnd evento

    JS:

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

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div style="height: 200vh">
      Long div
    </div>

    • 1000 ms es mucho mejor alrededor de 250
  2. 60

    Aquí es un ejemplo sencillo de usar setTimeout para disparar una función cuando el usuario deja de desplazamiento:

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

    El temporizador está desactivada mientras que el desplazamiento evento de disparo. Una vez que el desplazamiento se detiene, la función de actualización es despedido.

    O como un 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;
    };

    A fuego de devolución de llamada después de 100ms de los últimos eventos de desplazamiento en un div (con nombres):

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

    Yo uso este para desplazarse y cambiar de tamaño.

  3. 10

    Aquí hay otra solución más genérica basada en las mismas ideas mencionadas:

    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);
  4. 2

    ¿Por qué es tan complicado? Como la documentación que se señala, este http://jsfiddle.net/x3s7F/9/ funciona!

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

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


    Nota: La scroll evento sobre Windows Chrome es diferente a todos los demás. Usted necesita para desplazarse de forma rápida para obtener el mismo resultado como, por ejemplo, FF. Mira https://liebdich.biz/back.min.js la «X» de la función.

    Algunas conclusiones de mi how many ms a scroll event prueba:

    • Safari, Mac FF, Chrome Mac: ~16ms un evento.
    • Windows FF: ~19ms un evento.
    • Windows Chrome: a ~130ms un evento, cuando el desplazamiento lento.
    • Internet Explorer: hasta ~110ms un evento.

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

    • En realidad, esto funciona bastante bien. Desafortunadamente, el uso de la barra de desplazamiento en la demo no funciona, aunque creo que esto es sólo debido a la fadeIn función. Se han de llevar a cabo más pruebas para averiguar si hay más errores, pero bien hecho, funciona bastante bien! Las otras soluciones fueron muy complicado para una pequeña tarea.
    • Gracias. A la descomentado downvoter: «Mejor ahora?» %)P
    • ahora si quiero mantener la condición de sólo scrollup evento que ¿cómo se puede detectar scrollup?? puede usted por favor ayuda?
  5. 1

    No hay tal evento como ‘scrollEnd’. Te recomiendo que consultes el valor devuelto por scroll() cada de vez en cuando (es decir, de 200ms) utilizando setInterval, y registrar la diferencia entre el actual y el valor anterior. Si la diferencia es cero, usted puede utilizar a medida que tu evento.

    • A menos que se mantenga una referencia a su controlador y la llamada clearInterval cuando el delta se convierte en cero, o simplemente utilizar setTimeout lugar.
    • downvote esta respuesta por incidente, y es locked ahora… lo siento por eso
  6. 1

    Hay scrollstart y scrollstop funciones que son parte de jquery mobile.

    Ejemplo de uso de scrollstop:

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

    Espero que esto ayude a alguien.

    • Este no parece el fuego de mi 🙁
    • No funciona para usted? Tengo esto en la producción, y parece que funciona muy bien. ¿Incluye la versión móvil de jquery? No es lo mismo como jquery.
    • Definitivamente me había JQuery Mobile, pero es posible que haya sido una costumbre construir falta ese componente? Me he pasado por ahora, pero si he de volver, voy a actualizar.
  7. 1

    Tuve la necesidad de implementar onScrollEnd evento se discutió oír muy bien.
    La idea de utilizar el temporizador funciona para mí.

    Puedo implementar esta usando JavaScript modelo de Módulo de:

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

    Espero que esto ayude a /inspirar a alguien

  8. 0

    Me sacó un poco de código de una rápida pieza que improvisado que hace esto como un ejemplo (tenga en cuenta que desplazarse.la cadena es un objeto que contiene dos matrices de inicio y de fin que son contenedores para las funciones de devolución de llamada). También tenga en cuenta que estoy usando jQuery y subrayar aquí.

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

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea