DIV auto scroll

Tengo un div que tiene una gran cantidad de elementos. Selecciono estos elementos dinámicamente haciendo clic en un botón, el desbordamiento es automático en mi caso. Lo que quiero es que cuando un elemento que no está visible se seleccione para desplazar el div para que pueda ser visible. ¿Cómo puedo hacer esto?DIV auto scroll

Fuente

2009-05-01 Anonymous

Usted puede utilizar la propiedad scrollTop de HTMLElement para establecer la cantidad de su contenido se puede desplazar por.

Y puede obtener la cantidad que necesita para desplazarse por offsetTop del elemento al que desea desplazarse.

Por ejemplo, con este código HTML:

<div id="container"> 
    <p id="item-1">foo</p> 
    <p id="item-2">bar</p> 
    <p id="item-3">baz</p> 
</div>

Usted podría utilizar este JavaScript para desplazar el contenedor div a tercer párrafo:

document.getElementById("container").scrollTop = document.getElementById("item-3").offsetTop;

Fuente

2009-05-01 07:37:09

Hay un error tipográfico en js document.getElementById ("contenedor"). ScrollTop –

Gracias Fatih. Fijo. –

Cuando se hace clic en el botón y se selecciona un elemento, se llama al método focus() de este elemento seleccionado. esto hará que el desplazamiento automático a su elemento:

<div style="height:80px; overflow:auto;"> 
    <input type="text" id="id1"><br><br> 
    <input type="text" id="id2"><br><br> 
    <input type="text" id="id3"><br><br> 
    <input type="text" id="id4"><br><br> 
    <input type="text" id="id5"><br><br> 
    <input type="text" id="id6"><br><br> 
</div> 
<input type="button" onclick="document.getElementById('id6').focus();">

Fuente

2009-05-01 07:26:46 Canavar

Esto no parece funcionar para elementos regulares "div" (al menos, no en Safari 4 o Firefox 3). –

No lo intento para Safari, pero Firefox 3 funciona perfectamente. – Canavar

El código que ha escrito allí funciona perfectamente. Sin embargo, si reemplaza los elementos de "entrada" con elementos "div", al enfocar el elemento div no parece desplazarse hacia él. Consulte http://cloud.quintusquill.com/dropbox/ScrollTest.html para ver un ejemplo. –

Sin embargo, otra opción es utilizar jQuery junto con el plugin ScrollTo.

Fuente

2009-05-01 07:28:08

También podría usar la propiedad DIV's scrollTop o scrollLeft (dependiendo de si el desplazamiento es horizontal o vertical).

He hecho esto antes y he usado un evento setTimeout para hacer que se mueva de forma fluida, en lugar de en 1 movimiento. Esto es sin JQuery tho.

Fuente

2009-05-01 07:31:59 Fermin

Otra opción más ... anclas.

Asignar cada elemento un identificador único, y cuando se quiere desplazarse a un elemento en particular, ejecute el siguiente código JavaScript:

location.hash = itemID;

... donde itemID es una variable que contiene el ID del elemento quieres desplazarte a.

Steve

Fuente

2009-05-01 07:35:07

Respuesta

Cuestiones relacionadas