DIV auto scroll

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

Puede usar la propiedad scrollTop de HTMLElement para establecer la cantidad por la que se desplaza su contenido.

Y puede get la cantidad que necesita para desplazarse desde offsetTop del elemento al que desea desplazarse.

Por ejemplo con este HTML:

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

Puede usar este JavaScript para desplazar el contenedor div al tercer párrafo:

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

Otra opción más es usar jQuery junto con el complemento ScrollTo .

Cuando se hace clic en el button y se selecciona un elemento, se llama al método focus () de este elemento seleccionado. esto causará 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();"> 

También puede usar la propiedad scrollTop o scrollLeft del DIV (dependiendo de si el desplazamiento es horizontal o vertical).

He hecho esto antes y utilicé un evento setTimeout para que se desplazara de forma fluida, en lugar de en 1 movimiento. Esto es sin JQuery tho.

Sin embargo, otra opción … anclas.

Asigne a cada elemento una ID única, y cuando desee 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 al que desea desplazarse.

Steve