controlar - set scroll position javascript

Evento de desplazamiento Choppy/Laggy en Chrome e IE

Question

Estoy intentando que un bloque de contenido siempre se muestre al usuario, incluso si se desplaza muy abajo en la página. También debería ser capaz de desplazarse hacia arriba y hacia abajo en el bloque de contenido. Aquí hay un violín con una versión reducida para mostrar lo que quiero decir:

http://jsfiddle.net/9ehfV/2/

Uno debe notar cuando se desplaza hacia abajo, hasta llegar al final del bloque rojo, arregla el bloque en la ventana, y cuando se desplaza hacia atrás, lo coloca hacia atrás.

En Firefox uno puede desplazarse hacia arriba y hacia abajo y la fijación / desvinculación descrita anteriormente es imperceptible, suave como la seda.

Sin embargo, una vez que uno intenta desplazarse en Chrome o IE, parece que el evento de desplazamiento se demora y uno puede ver el bloque "glitching" por un segundo. No es un retraso de código, parece ser algo con los navegadores.

¿Hay alguna forma de arreglar esto? Estoy al final de mi ingenio.

Agradecería sugerencias sobre cómo puedo lograr el mismo efecto de una manera diferente ... gracias

Answer 1

¿Has probado algún plugin jquery para barra de desplazamiento o usa animación para desplazarte hacia abajo y hacia arriba? Obligará a todos los navegadores a trabajar de la misma manera (o cierra lo suficiente).

Lo que sucede es que Firefox (al menos v12) tiene una animación de desplazamiento "nativo". Cuando navega por cualquier URL, puede notar la suavidad de las acciones de desplazamiento y esto no se implementa en otros navegadores, como Chrome o IE.

Ejemplos de plugins de jquery scroller:

• http://pagescroller.com/
• http://johnpolacek.github.com/scrollorama/
• http://slodive.com/web-development/jquery-scroll/

Answer 2

¿Por qué no usas style = "position: fixed; top: 00px; right; 00px;"

entonces siempre es visible sin picado

Answer 3

Dado que JavaScript se ejecuta en el mismo hilo que la interfaz de usuario, una devolución de llamada de evento de desplazamiento puede bloquear el hilo de la interfaz de usuario y causar retraso. Necesita acelerar el escucha de eventos de desplazamiento porque algunos navegadores disparan muchos de ellos. Especialmente si tiene OS X con un dispositivo de desplazamiento analógico. Dado que realiza muchos cálculos de altura en su oyente, provocará un reflujo (muy caro) por cada evento de desplazamiento que se active .

Para estrangular al oyente, debes evitar que el oyente lo active siempre. Por lo general, esperas hasta que el navegador no desencadene un evento durante x milisegundos o que tengas un tiempo mínimo entre llamar a tu devolución de llamada. Intenta ajustar el valor para ver el efecto. Incluso 0 milisegundos pueden ayudar, ya que retrasará la ejecución de la devolución de llamada hasta que el navegador tenga tiempo (generalmente 5-40 ms).

También es una buena práctica alternar una clase para cambiar entre estados (posición estática y fija) en lugar de codificarla en JavaScript. A continuación, tiene una separación más clara de las preocupaciones y evita el posible rediseño adicional por error (consulte la sección "Los navegadores son inteligentes"). ( ejemplo en jsfiddle )

Espere una pausa de x ms

// return a throttled function
function waitForPause(ms, callback) {
    var timer;

    return function() {
        var self = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            callback.apply(self, args);
        }, ms);
    };
}

this.start = function() {
    // wrap around your callback
    $window.scroll( waitForPause( 30, self.worker ) );
};

Espere al menos x ms ( jsfiddle )

function throttle(ms, callback) {
    var timer, lastCall=0;

    return function() {
        var now = new Date().getTime(),
            diff = now - lastCall;
        console.log(diff, now, lastCall);
        if (diff >= ms) {
            console.log("Call callback!");
            lastCall = now;
            callback.apply(this, arguments);
        }
    };
}

this.start = function() {
    // wrap around your callback
    $window.scroll(throttle(30, self.worker));
};

jQuery Waypoints Como ya estás usando jQuery, echaré un vistazo al plugin jQuery Waypoints, que tiene una solución simple y elegante para tu problema. Simplemente defina una devolución de llamada cuando el usuario se desplaza a un determinado waypoint.

Ejemplo: ( jsfiddle )

$(document).ready(function() {
    // throttling is built in, just define ms
    $.waypoints.settings.scrollThrottle = 30;

    $(''#content'').waypoint(function(event, direction) {
        $(this).toggleClass(''sticky'', direction === "down");
        event.stopPropagation();
    }, {
        offset: ''bottom-in-view'' // checkpoint at bottom of #content
    });
});