自動滾動div

我有一個div其中包含一個聊天框。每當有新消息到達時，它都會被附加到框中 - 我想自動將框移動到底部（以顯示新消息）。我怎樣才能做到這一點？自動滾動div

<div id="chatting" style="overflow: auto; background-color: #fff; border: solid 2px #dedede; width: 600px; height: 500px; padding: 10px;"> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
    hello<br/> 
</div>

來源

2012-12-11 tarek

[如何在添加數據時自動滾動到div末尾？]（http://stackoverflow.com/questions/7303948/how-to-auto-scroll-to-end-of-div -when-data-is-added） –

我不確定我是否理解這個問題。你想讓頁面在加載時滾動到底部嗎？ –

您可以通過設置聊天窗口div的scrollTop屬性做到這一點。要滾動到div的底部，設置scrollTop等於scrollHeight：

var chatWindow = document.getElementById('chating'); 
chatWindow.scrollTop = chatWindow.scrollHeight;

http://jsfiddle.net/Ln8Hd/

或者，使用jQuery：

var chatWindow = $("#chating"); 
chatWindow.scrollTop(chatWindow[0].scrollHeight);

你會想每次調用這個聊天消息已被添加到div。

來源

2012-12-11 17:34:33 RoccoC5

回答

相關問題