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