Alinear Scrollbar="BOTTOM"

syslock64 · #1 (**permalink**) 14/05/2010, 19:53

Buenas comunidad, tengo esta idea:

- Creando un "DIV" dentro de un "Div-Contenedor" con estilo Overflow="scrollbar", cuando voy creando los nuevos "DIV" 's ira agregando con appendChild al final del contendio como todos sabemos....

- Ahora cuando hay mucho k mostrar se activa el Scrollbar del DIV y los elementos creados se van creando uno abajo de otro... Hasta ahi todo OK

- Desearia saber como puedo posicionar el SCROLLBAR a lo mas bajo posible... k baje el scrollbar hasta la ultima posicion aki les dejo el codigo exacto... solo es un simple codigo pero para que puedan agregarle lo k le falta...

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="javascript" type="text/javascript">

function addElement(){
content="Contenido creado";
Elm_div = document.getElementById("content-chat");
ElmNew = document.createElement("div");
ElmNew.setAttribute("class","");
Elm_div.appendChild(ElmNew);

ElmNew.innerHTML=content;
ElmNew.onfocus;
}
</script>
</head>
<body onload="">
<div style="display:block; width:50px; height:10px; background:#blue; cursor:pointer" onclick="addElement()"></div>
<div id="content-chat" style="display:block; width:400px; height:100px; overflow:scroll">

</div>
</body>
</html>

Desde ya muchas gracias a la comuna ^^

syslock64 · #2 (**permalink**) 14/05/2010, 20:20

Bueno creo k me voy a autoresponder... creo k no es valido o no se... estaba buscando el codigo por mas de 20 minutos en el foro pero no sabia como buscarlo...

Hasta que porfin di con el nombre y encontre esto en un resultado de busqueda de google que me devolvio:

Elm_div.scrollTop= Elm_div.scrollHeight - 10; k viene a ser la altura del DIV_CONTENEDOR

aqui les dejo el codigo...

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="javascript" type="text/javascript">

function addElement(){
content="Contenido creado";
Elm_div = document.getElementById("content-chat");
ElmNew = document.createElement("div");
ElmNew.setAttribute("class","");
Elm_div.appendChild(ElmNew);

ElmNew.innerHTML=content;
Elm_div.scrollTop= Elm_div.scrollHeight - 10;
}
</script>
</head>
<body onload="">
<div style="display:block; width:50px; height:10px; background:#blue; cursor:pointer" onclick="addElement()"></div>
<div id="content-chat" style="display:block; width:400px; height:100px; overflow:scroll">

</div>
</body>
</html>

Entonces si existia propiedades de scrolllTop busque y encontre "Elm_div.scrollHeight" eh hice lo siguiente:

Elm_div.scrollTop= Elm_div.scrollHeight - 10;

abimaelrc · #3 (**permalink**) 14/05/2010, 20:34

Trata de esta forma

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title>
<style type="text/css">
#scrollBottom{
    overflow: auto;
    height: 400px;
    background-color: #369;
}
</style>
<script type="text/javascript">
function toBottom(){
    div = document.getElementById('scrollBottom');
    div.scrollTop = div.scrollHeight;
}
window.onload = toBottom;
</script>
</head> 
<body> 
<div id="scrollBottom">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body> 
</html>

syslock64 · #4 (**permalink**) 14/05/2010, 21:45

Genial funciona correctamente... el codigo k puse como auto respuesta tbn hacia lo k deseaba pero no estoy seguro k lo sea siempre.... ya k 10 puede ser un valor estatico y no dinamico... gracias por la ayuda abimalerc

creo k se puede dar por POST CERRADO ^^