javascript - eventos - off js

IE 11 desplazamiento suave no disparar eventos de desplazamiento intermedio

Question

Si hacemos un caso de prueba simple como:

document.documentElement.addEventListener(''scroll'', function() {
    console.log(document.documentElement.scrollTop);
});

Y luego vaya y desplácese usando la barra de desplazamiento haciendo clic en la pista, o usando PageDown / PageUp, luego podemos ver que solo tenemos un evento al final de la animación de desplazamiento.

Ahora, en teoría, podría corregir algo de ese comportamiento simulando los eventos de desplazamiento. Código de ejemplo con jQuery y Underscore:

$(function () {
    var $document = $(document), until = 0;

    var throttleScroll = _.throttle(function () {
        $document.scroll();
        if (+new Date < until) {
            setTimeout(throttleScroll, 50);
        }
    }, 50);

    $document.keydown(function (evt) {
        if (evt.which === 33 || evt.which === 34) {
            until = +new Date + 300;
            throttleScroll();
        }
    });
});

Pero todavía no funciona. Solo obtenemos eventos de desplazamiento con el scrollTop original y el scrollTop destino, sin valores intermedios.

Si luego ve y console.log(document.documentElement.scrollTop) cada 10 ms, entonces podemos ver que IE simplemente no actualiza el scrollTop medida que se desplaza.

Esto es muy frustrante si queremos "fijar" algo en la posición de desplazamiento. Se pone desigual con IE.

No observé este comportamiento en ningún otro navegador y no probé con versiones anteriores de IE.

Si alguien ha encontrado una manera de corregir el comportamiento de IE (¿quizás hay un CSS mágico para desactivar el desplazamiento suave en IE 11?) ¡Entonces me gustaría mucho saberlo!

Gracias :-)

Answer 1

Como último recurso loco (no parece tan loco en realidad si el problema es crítico): ¿tal vez desactivar el desplazamiento nativo por completo y usar el desplazamiento personalizado (es decir, http://jscrollpane.kelvinluck.com/ )? Y vincule las cosas de onscroll a sus eventos personalizados: http://jscrollpane.kelvinluck.com/events.html

Answer 2

El problema que está describiendo se limita a las instancias de Internet Explorer 11 que se ejecutan en Windows 7. Este problema no afecta a la plataforma en la que nació IE 11, Windows 8.1. Parece que IE 11 en Windows 7 cae en una categoría similar a otras implementaciones de desplazamiento mencionadas anteriormente. No es lo ideal, pero es algo con lo que tenemos que trabajar / alrededor por el momento.

Voy a seguir investigando esto; de hecho, simplemente saque una máquina con Windows 7 del armario para configurarlo a primera hora de la mañana para investigar más a fondo. Si bien no podemos abordar esto de frente, quizás, quizás, hay una manera de evitar el problema en sí.

Continuará.

Answer 3

Parece que hay una publicación en IE y que obliga a una pantalla a "pintar" para ayudar a arrastrar y soltar. Parece lo contrario de la mayoría de los esfuerzos de rendimiento, pero podría funcionar? https://.com/a/12395506/906526 (código de https://.com/users/315083/george )

function cleanDisplay() {
    var c = document.createElement(''div'');
    c.innerHTML = ''x'';
    c.style.visibility = ''hidden'';
    c.style.height = ''1px'';
    document.body.insertBefore(c, document.body.firstChild);
    window.setTimeout(function() {document.body.removeChild(c)}, 1);
}

Puedes probar las animaciones CSS para que el navegador maneje la animación / transición. Ej. Aplicando una clase de mostrar / ocultar en scroll y, animación CSS.

.hide-remove {
    -webkit-animation: bounceIn 2.5s;
    animation: bounceIn 2.5s;
}

.hide-add {
    -webkit-animation: flipOutX 2.5s;
    animation: flipOutX 2.5s;
    display: block !important;
}

Si no tiene una animación de control de navegador (con css creativo), los fotogramas clave y el rendimiento de JS pueden ofrecer clientes potenciales. Como ventaja adicional, he visto varios sitios con barras de navegación que "reaparecen" después del final del desplazamiento.

Answer 4

Usted dijo: "Si alguien ha encontrado una manera de corregir el comportamiento de IE (¿tal vez hay un CSS mágico para desactivar el desplazamiento suave en IE 11?) ¡Entonces me gustaría mucho saberlo!"

Esto no lo apaga, pero esto es lo que uso para resolver el problema del desplazamiento suave, es decir, con elementos fijos.

if(navigator.userAgent.match(/Trident//7/./)) {
    $(''body'').on("mousewheel", function ( event ) {
        event.preventDefault();
        var wd = event.wheelDelta;
        var csp = window.pageYOffset;
        window.scrollTo(0, csp - wd);
    });
}