ayuda con barra de desplazamiento

rodrigo_lopez · #1 (**permalink**) 06/06/2008, 17:12

hola. tengo un <div></div> con overflow:auto para mostrar la barra de desplazamiento debido a la cantidad de contenido que se muestra.
Mi duda pasa por lo siguiente:

Quiero que la barra de desplazamiento automaticamente se dirija hacia abajo. por defecto queda arriba y necesito que se corra hasta lo mas abajo.

Hay forma de hacerlo con css o tengo que buscar otra cosa?

rodrigo_lopez · #2 (**permalink**) 06/06/2008, 21:18

Hola, tengo un problema.
Estoy haciendo un chat en ajax, la cosa no va en modificar ese script, sino me falta mantener la barra scroll del <div> </div> abajo siempre mientras se vayan agreando mensajes.

Tengo lo siguiente:

Código PHP:

  <script>

    function cargar(){

        recibeid('func_chat.php','accion=cargar','m=n','mensajes');

    }

</script>

<form name="form" onSubmit="return false">

<input type="hidden" name="nick" value="link">

<table cellspacing="0" cellpadding="1">

    <tr>

        <td colspan="2">

        <div class="mensajes" id="mensajes"></div>

        </td>

    </tr>

    <tr>

        <td><input class="inputt" type="text" name="mensaje"></td>

        <td><input class="enviarbutton" type="submit" name="enviar" value="Enviar" 

        onClick="recibeid('func_chat.php','accion=post','nick='+form.nick.value+'&mensaje='+form.mensaje.value+'','enviardatos'); cargar();">

        </td>

    </tr>

</table>

</form>

cargar estaría actualizando los datos.
Aún no genero el contador para que actualice cada x segundos, me he preocupado primerod e dejar el scroll abajo siempre que llame a la funcion cargar, pero no puedo.
Lo ultimo y ma sutil que encontré pero no me funcionó fue lo siguiente con scrollTop y scrollHeight:
http://pablobm.com/blog/para_abajo_con_el_scroll

pero no tengo idea como implementarlo.
Le cambie la svariables, hice una que otra cosa, pero no lo logro hacer. el scroll sigue quedandose arriba.

Una ayuda por favor.

JavierB · #3 (**permalink**) 07/06/2008, 03:39

Hola rodrigo_lopez

Que yo sepa, con Css no se puede, tendrías que utilizar JavaScript:

Código:

document.getElementById('idDelDiv').scrollTop=5000

Mensaje movido al foro de JavaScript desde Css y temas unidos.

No está permitido repetir mensajes en distintos foros.

Saludos,

rodrigo_lopez · #4 (**permalink**) 07/06/2008, 10:01

no pasa nada.
lo dejé así y no se que me ha salido mal:

Código PHP:

  <script language="javascript" src="ajax.js"></script>
<script>
    function cargar(){
        recibeid('func_chat.php','accion=cargar','m=n','mensajes');
        document.getElementById('mensajes').scrollTop=5000
    }
</script>

<div class="mensajes" id="mensajes"></div>

la funcion cargar funciona bien hasta donde envío los datos a func_chat.php, pero despues no me tira el scroll hacia abajo.

Panino5001 · #5 (**permalink**) 07/06/2008, 10:26

Tu problema es que seguramente llamas periódicamente a ajax para que sobreescriba el contenido de la capa mensajes, y en cambio llamás a la línea que te sugiere Javier sólo 1 vez.
Tendrías que colocar aparte y dentro de un temporizador la línea que te pasó Javier.
Algo así:

Código PHP:

  <script>
setInterval(function(){
document.getElementById('mensajes').scrollTop=5000;},200);
</script>

Y acá tenés un ejemplo que simula tu llamado periódico a ajax, combinado con esto que te señalé antes:

Código PHP:

  <!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=iso-8859-1" />
<title></title>
<style>
#mensajes{ width:300px; height:300px; border:1px solid #000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9; color:#666666; overflow:auto;}
</style>
</head>

<body>
<script>
function mensajes(){
    var mbr=document.createElement('br');
    var txt=document.createTextNode(Math.random());
    document.getElementById('mensajes').appendChild(txt);
    document.getElementById('mensajes').appendChild(mbr);
}
setInterval('mensajes()',200);
setInterval(function(){
document.getElementById('mensajes').scrollTop=5000;},200);
</script>

<div id="mensajes"></div>
</body>
</html>

rodrigo_lopez · #6 (**permalink**) 07/06/2008, 10:53

o.O
me funciono perfecto.

muchas gracias..

Panino5001 · #7 (**permalink**) 07/06/2008, 10:57

Me alegra que te haya servido ;)