聊天框總是滾動到底部到最後一條聊天線

Question

我正在嘗試構建一個聊天界面，但每當有任何新聊天被更新時聊天框都不滾動到最後一行，而是停留在聊天輸出框的頂部，現在我需要聊天框滾動條來始終滾動到最新的聊天行。這是迄今爲止代碼：

\t \t var accessToken = "8b8205aeb6174669b372e6fecd40f9eb"; 
 
\t \t var baseUrl = "https://api.api.ai/v1/"; 
 

 
\t \t $(document).ready(function() { 
 
\t \t \t $("#input").keypress(function(event) { 
 
\t \t \t \t if (event.which == 13) { 
 
\t \t \t \t \t event.preventDefault(); 
 
\t \t \t \t \t send(); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t \t $("#rec").click(function(event) { 
 
\t \t \t \t switchRecognition(); 
 
\t \t \t }); 
 
\t \t }); 
 
\t \t var recognition; 
 
\t \t function startRecognition() { 
 
\t \t \t recognition = new webkitSpeechRecognition(); 
 
\t \t \t recognition.onstart = function(event) { 
 
\t \t \t \t updateRec(); 
 
\t \t \t }; 
 
\t \t \t recognition.onresult = function(event) { 
 
\t \t \t \t var text = ""; 
 
\t \t \t  for (var i = event.resultIndex; i < event.results.length; ++i) { 
 
\t \t \t  \t text += event.results[i][0].transcript; 
 
\t \t \t  } 
 
\t \t \t  setInput(text); 
 
\t \t \t \t stopRecognition(); 
 
\t \t \t }; 
 
\t \t \t recognition.onend = function() { 
 
\t \t \t \t stopRecognition(); 
 
\t \t \t }; 
 
\t \t \t recognition.lang = "en-US"; 
 
\t \t \t recognition.start(); 
 
\t \t } 
 

 
\t \t function stopRecognition() { 
 
\t \t \t if (recognition) { 
 
\t \t \t \t recognition.stop(); 
 
\t \t \t \t recognition = null; 
 
\t \t \t } 
 
\t \t \t updateRec(); 
 
\t \t } 
 
\t \t function switchRecognition() { 
 
\t \t \t if (recognition) { 
 
\t \t \t \t stopRecognition(); 
 
\t \t \t } else { 
 
\t \t \t \t startRecognition(); 
 
\t \t \t } 
 
\t \t } 
 
\t \t function setInput(text) { 
 
\t \t \t $("#input").val(text); 
 
\t \t \t send(); 
 
\t \t } 
 
\t \t function updateRec() { 
 
\t \t \t $("#rec").text(recognition ? "Stop" : "Speak"); 
 
\t \t } 
 
\t \t function send() { 
 
\t \t \t var text = $("#input").val(); 
 
\t \t \t $.ajax({ 
 
\t \t \t \t type: "POST", 
 
\t \t \t \t url: baseUrl + "query?v=20150910", 
 
\t \t \t \t contentType: "application/json; charset=utf-8", 
 
\t \t \t \t dataType: "json", 
 
\t \t \t \t headers: { 
 
\t \t \t \t \t "Authorization": "Bearer " + accessToken 
 
\t \t \t \t }, 
 
\t \t \t \t data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }), 
 
\t \t \t \t success: function(data) { 
 
\t \t \t \t \t console.log(data) 
 
\t \t \t \t \t window.test = data; 
 
\t \t \t \t \t //setResponse(JSON.stringify(data, undefined, 2)); 
 
\t \t \t \t \t // $("#res").append("<li class='list-group-item'>"+ 
 
\t \t \t \t \t // "User says - " + data.result.resolvedQuery + 
 
\t \t \t \t \t // "<br/> Bot says - " + 
 
\t \t \t \t \t // data.result.fulfillment.speech 
 
\t \t \t \t \t // +"</li>"); 
 

 
\t \t \t \t \t $("#res").append("<li class='user-bubble'>"+data.result.resolvedQuery + "</li>" + 
 
\t \t \t \t \t \t "<br/>" + "<li class='bot-bubble'>"+data.result.fulfillment.speech + "</li>"); 
 
\t \t \t \t }, 
 
\t \t \t \t error: function() { 
 
\t \t \t \t \t setResponse("Internal Server Error"); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t \t setResponse("Loading..."); 
 
\t \t } 
 
\t \t function setResponse(val) { 
 
\t \t \t $("#response").text(val); 
 
\t \t } 
 

 

 
\t

\t \t .chat-section{ 
 
\t \t \t height: 500px; 
 

 
\t \t \t /*border: 1px solid grey;*/ 
 
\t \t \t box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2); 
 
    \t border-radius: 5px; 
 
\t \t } 
 
\t \t .chat-section:hover{ 
 

 
\t \t \t /*transform: scale(1.05);*/ 
 
\t \t } 
 
\t \t .chat-output{ 
 

 
\t \t \t \t height: 450px; 
 
\t \t \t \t overflow-y: auto; 
 
\t \t } 
 

 
\t \t .chat-input{ 
 
    height: 50px; 
 
    border-top: 1px solid lightgray; 
 
\t \t } 
 

 
\t \t .bodnone{ 
 
\t \t \t height: 40px !important; 
 
\t \t \t border: none; 
 
\t \t } 
 
\t \t .micicon{ 
 

 
\t \t \t border: none; 
 
\t \t \t background: transparent; 
 
\t \t \t vertical-align: top; 
 
\t \t } 
 

 
\t \t .form-control{ 
 
\t \t \t height: 30px; 
 
\t \t \t padding: 3px 12px; 
 
\t \t } 
 

 
\t \t .input-group-addon{ 
 

 
\t \t \t font-size: 20px; 
 
\t \t } 
 

 
\t \t .user-bubble{ 
 
\t \t \t display: inline-block; 
 
\t  padding: 15px 25px; 
 
\t  border-radius: 3px; 
 
\t  border: 1px solid #eee; 
 
\t  margin-bottom: 5px; 
 
\t  font-size: 16px; 
 
\t  clear: both; 
 

 
\t \t background-color: #efefef; 
 
    float: left; 
 
    margin-right: 15px; 
 
    margin-top: 15px; 
 
    margin-left: 15px; 
 
\t \t } 
 

 
\t \t .bot-bubble{ 
 
\t \t \t display: inline-block; 
 
    padding: 15px 25px; 
 
    border-radius: 3px; 
 
    border: 1px solid #eee; 
 
    margin-bottom: 5px; 
 
    font-size: 16px; 
 
    clear: both; 
 
\t \t \t color: white; 
 
    background-color: #A5D175; 
 
    float: right; 
 
    margin-top: 15px; 
 
    margin-right: 15px; 
 
    margin-left: 15px; 
 

 
\t \t } 
 
\t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
\t <script src="https://use.fontawesome.com/b68a7e9cb4.js"></script> 
 

 

 
    <nav class="navbar navbar-default navbar-static-top"> 
 
\t <div class="container"> 
 
\t \t <div class="navbar-header"> 
 
\t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
\t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t </button> 
 
\t \t \t <a class="navbar-brand" href="#">Chat bot</a> 
 
\t \t </div> 
 
\t \t <div id="navbar" class="navbar-collapse collapse"> 
 

 
\t \t </div><!--/.nav-collapse --> 
 
\t </div> 
 
</nav> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-lg-3"></div> 
 
\t \t \t <div class="col-lg-6"> 
 
\t \t \t \t <!-- <div class="input-group"> 
 
\t \t \t \t \t <input type="text" id="input" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> 
 
\t \t \t \t \t <span class="input-group-addon" id="rec">Speak</span> 
 
\t \t \t \t </div> --> 
 
\t \t \t \t <!-- <br/><br/> --> 
 
\t \t \t \t <div class="chat-section" id="messages"> 
 
\t \t \t \t <div class="chat-output" id="message"> 
 
\t \t \t \t <ul class="list-unstyled" id="res"> 
 

 
\t \t \t \t </ul> 
 
\t \t \t \t <div id="empty"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="input-group chat-input"> 
 
\t \t \t \t \t <input type="text" id="input" class="form-control bodnone" placeholder="Ask Something..." aria-describedby="basic-addon2"> 
 
\t \t \t \t \t <span class="input-group-addon micicon" id="rec"><i class="fa fa-microphone" aria-hidden="true"></i></span> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 

 
\t \t \t \t \t <!-- <br>Response<br> <textarea id="response" cols="40" rows="20"></textarea> --> 
 

 
\t \t \t </div> 
 
\t \t \t <div class="col-lg-3"></div> 
 
\t \t </div> 
 

 

 
    </div> <!-- /container -->

Answer 1

正如你所定的固定高度聊天輸出元素要添加新創建的元素列表無樣式。因此，當您添加

<li class='user-bubble'>"+data.result.resolvedQuery + "</li>" + 
        "<br/>" + "<li class='bot-bubble'>"+data.result.fulfillment.speech + "</li> 

時，列表中未添加樣式的高度正在增加，以添加到現有的list-unstyled元素。 因此，您需要在添加聊天元素之後將頂部聊天輸出元素滾動到列表的新高度 - 無風格。 在此之前，您需要將clearfix類添加到list-unstyled元素，因爲它不會清除兒童的浮動以獲取適當的高度。

<ul class="list-unstyled clearfix" id="res"></ul> 

現在你只需要在send（）函數中添加新的li元素之後滾動到list-unstyled的新高度。 所以，只需在send（）函數成功添加最後一條語句。

$(".chat-output").scrollTop($(".list-unstyled").height()); 

你就完成了。請享用。

Answer 2

當你添加新的消息，消息區域（我認爲是消息的div）

你需要像這樣

var messageArea = $('#res'); 
messageArea.scrollTop = messageArea.scrollHeight; 

編輯

確定我看到你把消息DIV：

$("#res").append("<li class='user-bubble'>"+data.result.resolvedQuery + "</li>" + 
        "<br/>" + "<li class='bot-bubble'>"+data.result.fulfillment.speech + "</li>"); 

之後，你應該把我的代碼