Establecer scrollLeft y scrollTop simultáneamente

¿Hay alguna forma de establecer scrollLeft y scrollTop de div simultáneamente? En Chrome, Safari y Opera, funciona inmediatamente configurándolos secuencialmente, pero en Firefox (anterior a 4) e IE (¡incluso en IE9!) La configuración de uno de ellos provoca un reflujo que da como resultado desagradables fallos porque la página primero se moverá hacia la izquierda y hacia abajo. como un movimiento de escalera.Establecer scrollLeft y scrollTop simultáneamente

Veo que la ventana tiene un método llamado scrollTo (x, y), ¿hay algún equivalente para divs normales?

O, ¿es posible cambiar el comportamiento del navegador para que el reflujo no se active al solo cambiar el desplazamiento? Una fuente que encontré dijo que esto solo ocurriría si tengo onscroll-event registrado en el div pero no tengo ninguno, así que ese no puede ser el problema.

Fuente

2010-11-30 vaxthus

En lugar de configurar scrollLeft y scrollTop, puede establecer el foco en algún elemento en esa posición; dicho elemento también se puede crear sobre la marcha. –

@mercator, esta es una pregunta completamente diferente. Estoy teniendo el mismo problema con "izquierda" y "ancho": mi animación a veces parece nerviosa porque necesito que ambas propiedades se configuren simultáneamente, o al menos sin un reflujo en el medio. – harpo

Parece ser lo mismo que esta pregunta, solo una semana o dos antes: http: // stackoverflow.com/questions/4207505/is-there-a-way-to-apply-multiple-css-styles-in-a-batch-to-avoid-multiple-reflows – harpo

No debe utilizar scrollLeft y scrollTop, debe establecer scrollLeft y scrollTop con .animate().

.animate({ 
    .scrollLeft: x, 
    .scrollTop: y 
})

También hay varios plugins construidos a partir de http://plugins.jquery.com/project/ScrollTo para simplificar el proceso.

Fuente

2011-01-15 18:21:41 S16

[Necesita más jQuery.] (Http://needsmorejquery.com) –

Me imagino que una animación sería el mejor método para esto (marcos más de JavaScript lo hará), pero también se puede probar esto:

setTimeout("verticalScrollFunction", 1); 
setTimeout("horizontalScrollfunction", 1);

Fuente

2011-04-05 19:22:40

que estaba teniendo este mismo problema hace unos momentos. Descubrí que la sugerencia animada no era buena (nerviosa, lenta, en última instancia peor), pero el complemento jQuery incluido con ella era al menos marginalmente mejor. Para mí, la sobrecarga que requería no valía realmente la pequeña ganancia.

En mi situación, tengo un div desplazable con una gran imagen dentro. Cuanto más grande es esta imagen, peor es el reflujo. Pude mejorar bastante drásticamente la situación por ocultando el div inmediatamente antes de establecer las propiedades de desplazamiento, y luego mostrándolo de nuevo inmediatamente después. Este permite a IE ignorar la re-representación del contenido después de que se establezca la primera propiedad, y en su lugar espere hasta que el elemento sea "visible" nuevamente (después de que ambos estén configurados).

No parece haber ningún parpadeo en ninguna versión actual de ningún navegador importante (que fue mi primera preocupación). Probado en Firefox 4, Opera 11, Chrome 10, IE 8, Internet Explorer 8 compatibilidad, y Safari 5.

En jQuery:

var my_pane = $('#my_scroll_pane'); 
my_pane.css('visibility', 'hidden'); 
my_pane.scrollTop(100).scrollLeft(100); 
my_pane.css('visibility', 'visible');

ole Ordinaria de JavaScript:

var scroll_pane = document.getElementById('my_scroll_pane'); 
scroll_pane.style.visibility = 'hidden'; 
scroll_pane.scrollTop = 100; 
scroll_pane.scrollLeft = 100; 
scroll_pane.style.visibility = 'visible';

ACTUALIZACIÓN : Esto parpadea bastante bruscamente en FF3.6. Si alguien tiene alguna idea que no implique el rastreo del navegador, cualquier comentario sería bienvenido.

Fuente

2011-04-13 14:54:21 Slobaum

-1

Utilice el posicionamiento absoluto o el margen negativo en lugar de desplazarse.

Fuente

2012-05-04 11:40:24 kikoqiu

Establecer scrollLeft y scrollTop simultáneamente

Respuesta

Cuestiones relacionadas