我正在尝试构建一个聊天界面，但是每当更新任何新聊天时，聊天框都不会滚动到最后一行，而是停留在聊天输出框的顶部，现在我需要聊天框滚动条始终滚动到最新的聊天热线。这是到目前为止的代码:
var accessToken = "8b8205aeb6174669b372e6fecd40f9eb";
var baseUrl = "https://api.api.ai/v1/";
$(document).ready(function() {
$("#input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
send();
}
});
$("#rec").click(function(event) {
switchRecognition();
});
});
var recognition;
function startRecognition() {
recognition = new webkitSpeechRecognition();
recognition.onstart = function(event) {
updateRec();
};
recognition.onresult = function(event) {
var text = "";
for (var i = event.resultIndex; i < event.results.length; ++i) {
text += event.results[i][0].transcript;
}
setInput(text);
stopRecognition();
};
recognition.onend = function() {
stopRecognition();
};
recognition.lang = "en-US";
recognition.start();
}
function stopRecognition() {
if (recognition) {
recognition.stop();
recognition = null;
}
updateRec();
}
function switchRecognition() {
if (recognition) {
stopRecognition();
} else {
startRecognition();
}
}
function setInput(text) {
$("#input").val(text);
send();
}
function updateRec() {
$("#rec").text(recognition ? "Stop" : "Speak");
}
function send() {
var text = $("#input").val();
$.ajax({
type: "POST",
url: baseUrl + "query?v=20150910",
contentType: "application/json; charset=utf-8",
dataType: "json",
headers: {
"Authorization": "Bearer " + accessToken
},
data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }),
success: function(data) {
console.log(data)
window.test = data;
//setResponse(JSON.stringify(data, undefined, 2));
// $("#res").append("<li class='list-group-item'>"+
// "User says - " + data.result.resolvedQuery +
// "<br/> Bot says - " +
// data.result.fulfillment.speech
// +"</li>");
$("#res").append("<li class='user-bubble'>"+data.result.resolvedQuery + "</li>" +
"<br/>" + "<li class='bot-bubble'>"+data.result.fulfillment.speech + "</li>");
},
error: function() {
setResponse("Internal Server Error");
}
});
setResponse("Loading...");
}
function setResponse(val) {
$("#response").text(val);
}
.chat-section{
height: 500px;
/*border: 1px solid grey;*/
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
border-radius: 5px;
}
.chat-section:hover{
/*transform: scale(1.05);*/
}
.chat-output{
height: 450px;
overflow-y: auto;
}
.chat-input{
height: 50px;
border-top: 1px solid lightgray;
}
.bodnone{
height: 40px !important;
border: none;
}
.micicon{
border: none;
background: transparent;
vertical-align: top;
}
.form-control{
height: 30px;
padding: 3px 12px;
}
.input-group-addon{
font-size: 20px;
}
.user-bubble{
display: inline-block;
padding: 15px 25px;
border-radius: 3px;
border: 1px solid #eee;
margin-bottom: 5px;
font-size: 16px;
clear: both;
background-color: #efefef;
float: left;
margin-right: 15px;
margin-top: 15px;
margin-left: 15px;
}
.bot-bubble{
display: inline-block;
padding: 15px 25px;
border-radius: 3px;
border: 1px solid #eee;
margin-bottom: 5px;
font-size: 16px;
clear: both;
color: white;
background-color: #A5D175;
float: right;
margin-top: 15px;
margin-right: 15px;
margin-left: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/b68a7e9cb4.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Chat bot</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<!-- <div class="input-group">
<input type="text" id="input" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="rec">Speak</span>
</div> -->
<!-- <br/><br/> -->
<div class="chat-section" id="messages">
<div class="chat-output" id="message">
<ul class="list-unstyled" id="res">
</ul>
<div id="empty"></div>
</div>
<div class="input-group chat-input">
<input type="text" id="input" class="form-control bodnone" placeholder="Ask Something..." aria-describedby="basic-addon2">
<span class="input-group-addon micicon" id="rec"><i class="fa fa-microphone" aria-hidden="true"></i></span>
</div>
</div>
<!-- <br>Response<br> <textarea id="response" cols="40" rows="20"></textarea> -->
</div>
<div class="col-lg-3"></div>
</div>
</div> <!-- /container -->最佳答案
因为您已经为 chat-output 元素提供了固定高度，并且您正在将新创建的元素添加到 list-unstyled。所以当你添加 list-unstyled 的高度会增加
<li class='user-bubble'>"+data.result.resolvedQuery + "</li>" +
"<br/>" + "<li class='bot-bubble'>"+data.result.fulfillment.speech + "</li>
到现有的列表无样式元素。 因此，在添加聊天元素后，您需要将 scrollTop 聊天输出元素滚动到 list-unstyled 的新高度。 在此之前，您需要将 clearfix 类添加到列表无样式元素，因为它不会清除子元素的 float 以采用适当的高度。
<ul class="list-unstyled clearfix" id="res"></ul>
现在你只需要在 send() 函数中添加新的 li 元素后将 scrollTop 滚动到 list-unstyled 的新高度。 因此，只需在 send() 函数的成功中添加最后一条语句即可。
$(".chat-output").scrollTop($(".list-unstyled").height());
你就完成了。享受吧。
关于javascript - 聊天框总是滚动到底部到最后一行聊天，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42367450/