聊天框总是滚动到底部到最后一条聊天线

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>"); 

之后，你应该把我的代码