javascript - Optimizar la velocidad de desplazamiento para Internet Explorer 11

jquery internet-explorer

Question

Actualmente tengo una aplicación tipo agenda donde la primera columna es horizontal absoluta y la primera fila vertical absoluta. Estoy logrando esto al capturar el efecto de desplazamiento y cambiar la propiedad izquierda o superior de la clase CSS a la que está adjuntado. (estas clases pueden tener hasta 700 elementos (2 años por día)).

$(window).scroll(function () {
    $(''.Planning tr > td:first-child'').css("left", "" + $(this).scrollLeft() + "px");
    $(''.Planning thead > tr:first-child'').css("top", $(this).scrollTop()+50 + "px");                 
});

Esto funciona como se esperaba en todos los navegadores (probé en Chrome, Firefox e Internet Explorer)

Pero en Internet Explorer, es muy lento. El desplazamiento solo se muestra después de detener el desplazamiento, mientras que en Chrome y Firefox parece que la fila superior está fija, lo que se ve mejor y más fácil de usar.

¿Hay alguna manera de impulsar esto? ¿O cualquier biblioteca que esté optimizada para Internet Explorer para poder evitar este comportamiento "lento" en IE?

https://jsfiddle.net/7mfcrLh5/12/ Para un ejemplo de jsfiddle (esto funciona muy bien en Chrome, pero no en Internet Explorer)

Answer 1

Podría intentar regular la funcionalidad de la función de desplazamiento cada 100 ms o 200 ms, lo que es bastante rápido cada segundo.

var planningCol = $(''.Planning tr > td:first-child''),
    planningHead = $(''.Planning thead > tr:first-child'');

$(window).scroll(function(){
    var self = this;

    throttle(function(){
        planningCol.css({ left: $(self).scrollLeft() });
        planningHead.css(''top'', $(self).scrollTop() + 50 + ''px'');
    }(), 200); // call your function directly upon return
});

O puede usar CSS en el cuerpo, detectando cuando una página se scrolled o se scrolling . Luego aplique .scrolling { pointer-events: none !important; } .scrolling { pointer-events: none !important; } que aumenta la interfaz de usuario.

También intente mover las selecciones fuera de la función de desplazamiento si son siempre las mismas.

var win = $(window),
    body = $(document.body),
    planning = $(''.Planning''),
    planningCol = planning.find(''tr > td'').first(),
    planningHead = planning.find(''thead > tr'').first();

win.scroll(function(){
    // scrolled
    body.toggleClass(''scrolled'', !!win.scrollTop());

    // scrolling
    body.addClass(''scrolling'');
    planningCol.css({ left: win.scrollLeft() });
    planningHead.css({ top: win.scrollTop() });

    setTimeout(function(){
        body.removeClass(''scrolling'');
    }, 200);
});