Problema scroll di un div e ajax

**-MaVeRiK86-** · 21-02-2009, 18:11

Salve a tutti,
ho un applicativo ajax (chat) che mostra in un determinato intervallo dei dati in un div di dimensioni fisse a cui ho applicato la proprietà overflow:scroll;
Il problema è che all'invio di ogni nuovo messaggio il "puntatore" si ri-sposta all'inizio del div creando un effetto alquanto scomodo all'utente che per leggere gli ultimi messaggi deve fare scrolling ogni volta fino alla fine (le chat mantengono l'ultimo messaggio sempre in fondo).

Mi chiedevo se esiste un modo di mantere sempre la fine del div (a prescindere dalle dimensioni e dai dati contenuti) anche, ad esempio, al refresh della pagina, o con una soluzione basata su javascript.
Esiste soluzione o mi consigliereste altre strade?
Grazie in anticipo per le risposte

**cavicchiandrea** · 21-02-2009, 19:13

La strada + semplice (se non ci hai già pensato) è invertire i dati se salvati in db, oppure lavorare su ajax quando carica i dati invertirli, questa operazione (se possibile) e abbastanza complicata dipende dalle tue conoscenze in javascript/ajax.

**Straystudios** · 21-02-2009, 20:16

codice:

<!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<TITLE>default bottom scrolling div</TITLE>

<script type="text/javascript">

function setup(){
 box = document.getElementById("field");
 box.scrollTop = box.scrollHeight;
 
 alert("offsetHeight = "+box.offsetHeight+
       "\n\nscrollHeight = "+box.scrollHeight);
 }
</script>

</head>
<body text="#000000" bgcolor="#909090" onload='setup();'>

<div style="width: 400px; margin: 80px auto 10px auto; overflow: hidden;">
  W 400 x H 280 px DIV
</div>

<div id="field" 
 style="height: 280px; width: 400px; margin: 0px auto; overflow: scroll; background-color: #E3E3E3;"
 >
 contenuto
contenuto
contenuto
contenuto
contenuto

 contenuto
contenuto
contenuto
contenuto
contenuto

 contenuto
contenuto
contenuto
contenuto
contenuto

 contenuto
contenuto
contenuto
contenuto
contenuto

 contenuto
contenuto
contenuto
contenuto
contenuto

</div>


</body>
</html>

IExplorer vuole il !DOCTYPE xhtml perché margin: auto; funzioni; questo o quello comunque, non compromette lo SCRIPT.

box.scrollTop = box.offsetHeight;
anche sembrerebbe funzionare, ora; ma non se il contenuto aumenta ancora.
Stai a:

box.scrollTop = box.scrollHeight;

**-MaVeRiK86-** · 21-02-2009, 21:27

Grazie a entrambi per le risposte!
Ora provo la tua soluzione Straystudios

Discussione: Problema scroll di un div e ajax

Strumenti discussione

Ricerca discussione

Visualizza

Problema scroll di un div e ajax

scrollTop scrollRight scrollBottom scrollLeft scrollHeight offsetHeight

Permessi di invio