come riparare la barra di scorrimento sempre nella parte inferiore di un div?

Sto facendo una semplice applicazione di chat, voglio fissare la barra di scorrimento di un div sempre al bottom.just come questo enter image description here come riparare la barra di scorrimento sempre nella parte inferiore di un div?

Quando si carica la pagina indice la barra di scorrimento deve essere in fondo

Ecco il mio style.css

body{ 
font: 0.9em monospace; 
} 
    .messages{ 
    border: 1px solid #ccc; 
    width: 250px; 
    height: 210px; 
    padding: 10px; 
    overflow-y:scroll; 

} 
.message{ 
    color: slategrey; 

} 
.message p{ 
    margin: 5px 0; 
} 
.entry{ 
    width: 260px; 
    height: 40px; 
    padding: 5px; 
    margin-top: 5px; 
    font: 1em fantasy; 

}

Ecco il mio index.php

<?php 
session_start(); 
$_SESSION['user'] = (isset($_GET['user']) === TRUE) ? (int) $_GET['user'] : 0; 
?> 
<!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> 
     <link rel="stylesheet" href="css/styles.css"></link> 
    </head> 
    <body> 
     <div class="chat"> 
      <div class="messages" id="messages"> 
      </div> 
     <textarea class="entry" placeholder="type here and press enter"></textarea> 
    </div> 
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript" src="js/chat.js"> </script> 
</body>

Come posso impostare questo, please help me .. Grazie

fonte

2013-03-26 User

[Questo può dare qualche informazione] (http://jsfiddle.net/97z6Q/) – Ohgodwhy

Prova questo jquery:

$(".messages").animate({ scrollTop: $(document).height() }, "slow"); 
    return false;

e qui è il violino: http://jsfiddle.net/EX6vs/

o si riferisce all'altezza dell'elemento (molti sono d'accordo è il modo giusto), come di seguito:

$(".messages").animate({ scrollTop: $(this).height() }, "slow"); 
    return false;

e qui è il violino: http://jsfiddle.net/69vpnyu1/

fonte

2013-03-26 05:04:52 Fredy

Grazie, Fredy! Ho visto così tanti esempi, tutti dicendo la stessa cosa: scrollTop = scrollHeight. Ci sono due chiavi qui: in primo luogo, .animate. Questa è la chiave per farlo davvero muovere. Secondo, hai usato $ (document) .height e non l'altezza di (".messages"). Il che significa veramente che devi prendere il numero di linee dati con il tuo oggetto (div, textarea, ecc.) E più quello in base all'altezza della dimensione del font, ovvero l'altezza della finestra all'interno dell'oggetto. Quindi, in un certo senso, il documento $ è ancora sbagliato, ma è stato abbastanza per aiutarmi a capire perché tutti gli altri si sbagliavano. –

È possibile farlo utilizzando jQuery come si può vedere la demo qui:

http://jsfiddle.net/9S92E/

fonte

2013-03-26 04:57:20

si desidera qualcosa di simile, dove box è il div che contiene la tua chat. chiamali a caricamento pagina.

var box = document.getElementById('Box'); 
box.scrollTop = box.scrollHeight;

chiamare anche quando si pubblica una nuova chat.

Avevo creato un'applicazione simile utilizzando il motore di app di Google. si può avere un'occhiata qui

http://chatter-now.appspot.com/

sentitevi liberi di utilizzarlo come riferimento. sebbene tu stia usando php, gli aspetti visivi potrebbero essere utili.

fonte

2013-03-26 04:57:30 btevfik

suo genere di come un ibrido chatroom/guestbook. qualunque cosa tu scriva là si attacca. – btevfik

Sotto riga di codice per scorrere la barra di scorrimento verticale sempre nella parte inferiore dello pagina intera.

$("html, body").animate({ scrollTop: $(document).height() }, "fast");

sotto la linea di codice per scorrere barra di scorrimento verticale sempre nel fondo del contenitore div scorrevole chiamato a "daViewerContainer".

$("#daViewerContainer").animate({ scrollTop: $(document).height() }, "fast");

fonte

2013-07-22 16:41:28 Shoeb

ho fissato questo con:

$(document).scrollTop($(document).height());

Tutto dipende da come si configurano le div, quindi utilizzare il div per il documento. Ma questo funziona anche con i footer sticky eccellenti.

fonte

2014-09-01 22:19:05 KJS

function loadchatval(){ 
    $.post('loadchat.php',function(data){    
    $('#load_chat').html(data); 
    $("#load_chat").animate({ scrollTop: $(document).height() }, "slow"); 
    return false; 
}); 
}

fonte

2015-06-28 17:48:52

come riparare la barra di scorrimento sempre nella parte inferiore di un div?

risposta

Problemi correlati