posicion de un scrollbar en un div

[marymary]

Hola, lo que quiero es controlar la posicion de la barra scroll de un div, quiero que aunque el contenido vaya variando, el scoll siempre se situe al final, para ver las ulimas entradas, gracias.

[Saruman]

explicate mejor para ver si te puedo ayudar

[marymary]

Hola,
tengo el siguiente div
<div id="datos" STYLE="width:600px; height:300px; overflow-x:hidden; overflow-y:scroll; "></div>
Otra pagina genera unos resultados que se visualizan en este div, hasta ahí, lo tengo, pero la cuestión es que cuando los resultados superan las dimensiones del div aparece la barra de desplazamiento a la derecha y lo que yo quiero es que esta barra de desplazamiento simpre se posicione de forma que se vea el final de los resultados obtenidos.
graciasl

[Saruman]

prueba asi para ver:

Código HTML:

<div id="datos" STYLE="width:600px; height:300px; overflow:auto;"></div> 

[marymary]

Hola, con el codigo que me has dado, igualmente el scroll, está arriba del todo y yo quiero que se situe o desplace automaticamente bajo del todo

[Saruman]

no entiendo nada... pon un ejemplo por favor....

[marymary]

en el div se visualiza:
resultado1
resultado2
resultado3
resultado4
resultado5
resultado6
resultado7
si el resultado7, queda fuera del area visible del div debo emplear la barra de desplazamiento para poder verlo y yo lo que quiero es que la barra de desplazamiento se situe directamente al final del todo, para que sean los ultimos resultados los visibles.
Al igual que pasa en el area de texto donde te escribo esto, el escroll se mantiene de manera que lo que estoy escribiendo supera su area, pero siempre se ven las ultimas lineas para poder visualizar lo que estoy escribiendo. Muchas gracias.
No se si me habras entendido

[Saruman]

si ahora si.. usa anchor o anclas para esto.

Código HTML:

<div id="datos" STYLE="width:600px; height:50px; overflow:auto;">
resultado<br>
resultado<br>
resultado<br>
resultado<br>
resultado<br>
resultado<br>
resultado<br>
<a name="ultimo"></a>resultado final<br>
</div> 

Código:

 
window.onload = function() {
  document.location.href = "#" + document.anchors(0).name;
 }

[marymary]

Muchas gracias, el codigo que me has dado me funciona si lo ejecuto directamente en la pagina donde se generan los resultados, pero yo estos resultados los visualizo en otra pagina principal en el mencionado <div>

1º// Pagina de datos, es en esta pagina donde se generan los datos, que se ven en la pagina principal. Aquí me funciona el código.

2º// Pagina principal, contiene <div id="datos" STYLE="width:600px; height:50px; overflow:auto;">. Si visualizo desde aquí, el código que he insertado en la página de datos no me funciona. Tampoco me funciona si lo pongo aquí directamente, supongo que hay que indicarle que es dentro del <div>

Perdona mi torpeza, gracias.

[Saruman]

eso que te puse debe estar en la misma pagina donde esta el div y el anchor...

[derkenuke]

Sí, si funciona. Es una buena pregunta, la verdad es que nunca me la habia planteado. Asi que como ya esta resuelta propongo una nueva. Supongamos que tenemos dos divs de esos:

Código PHP:

  <div id="datos1" STYLE="width:600px; height:100px; overflow:auto;">
resultado<br>
resultado<br>
resultado<br>
resultado<br>
resultado<br>
resultado<br>
resultado<br>
<a name="ultimo"></a>resultado final<br>
</div>
<br><br>
<div id="datos2" STYLE="width:600px; height:100px; overflow:auto;">
resultado<br>
resultado<br>
resultado<br>
resultado<br>
resultado<br>
resultado<br>
resultado<br>
<a name="ultimo"></a>resultado final<br>
</div> 
   

¿Como lo hariamos? Ya que ya no podemos redireccionar hasta el link...

Hombre, yo si estuviera en la piel del problema propondria mediante DOM invertir el orden de los elementos dentro del div, y mostrarlos por fecha invertida, pero sin tocar nada... como se haria?

Estoy totalmente en la duda...

[Saruman]

bueno, los anchor no pueden tener le mismo nombre... por eso que no te sale....
deberias poner ultimo1 y ultimo2 y en la funcion llamar as:

Código:

 
window.onload = function() {
document.location.href = "#" + document.anchors(0).name;
document.location.href = "#" + document.anchors(1).name;
}

suerte

pd. hace rato tas mencionando el famoso "DOM"... que es eso??

[derkenuke]

Es decir, hablaba de este codigo:

Código PHP:

  <div id="datos1" STYLE="width:600px; height:100px; overflow:auto;">
    <ul>
        <li>resultado1</li>
        <li>resultado2</li>
        <li>resultado3</li>
        <li>resultado4</li>
        <li>resultado5</li>
        <li>resultado6</li>
        <li>resultado7</li>
        <li>resultado8</li>
    </ul>
</div>
<br><br>
<div id="datos2" STYLE="width:600px; height:100px; overflow:auto;">
    <ul>
        <li>resultado1</li>
        <li>resultado2</li>
        <li>resultado3</li>
        <li>resultado4</li>
        <li>resultado5</li>
        <li>resultado6</li>
        <li>resultado7</li>
        <li>resultado8</li>
    </ul>
</div>
<script>
 
capa=document.getElementById("datos2");
itemsObj=capa.childNodes[0].childNodes;        //objetos, pero no deja aplicar el reverse()
itemsArr=new Array();                        //pasamos el itemsObj a un array de toda la vida
for(a=0;a<itemsObj.length;a++)                //con un bucle que recorra todos los elementos de itemsObj
    itemsArr[a]=itemsObj[a];                //y los almacene en itemsArr
itemsArr.reverse();                            //le damos la vuelta a todos los elementos
for(a=0;a<itemsArr.length;a++) {            //aplicamos el texto de itemsArr a todos los items del div
    capa.childNodes[0].childNodes[a].innerText = itemsArr[a].innerText;
}
 
</script> 
  

La verdad es que me ha costado sacarlo un pokitillo... esto del DOM todavia para mi.. me da problemas...


Bueno, y sin reordenarlo? Todavia no se me ha ocurrido nada...

[derkenuke]

Je, hemos posteado mas o menos a la vez y no me he enterado.

Pues si que estaba mas facil de lo que yo habia planteado!

pd. hace rato tas mencionando el famoso "DOM"... que es eso??

Encontraras poca pero suficiente informacion en el google. Digamos que es el "arbol" de tags html en el documento. Javascript se puede mover por ese arbol, añadir elementos y borrarlos dinamicamente.. etc etc.
Una referencia obligada: http://www.w3.org/DOM/, pero si no quieres andarte con lios y pasar ya a la accion aqui lees sobre el dom y aqui lees sobre los eventos sobre el DOM, que son mas conocidos.

Se hacen cosas curiosas, como eso de reordenar.. y tal. Mira el inspector DOM que hizo caricatos, es realmente bueno:
http://www.pepemolina.com/DOM/index.html
te lee cada tag html y te lo anida con su padre y muestra sus hijos anidados... te resalta el elemento en cuestion... es una pasada.

Echale un vistazo.

[Saruman]

gracias, los leere...
saludos