如何解决自动滚动不适用于chatbot,我可以使用什么替代方法?
我目前正在电子商务网站上工作,并且嵌入了一个聊天机器人,但是当用户输入内容时我无法使其自动滚动 这是我的检索聊天机器人消息的js代码
methods: {
add_message: function() {
if (this.input.length > 0) {
var message = {
'text': this.input,'user': true,'chat_bot': false,};
var div = $("#messages");
this.messages.push(message);
this.input = '';
//just incase
this.send_blank = false;
this.placeholder = "Send a message to the chatbot...";
fetch("/get_bot_response/",{
body: JSON.stringify({ 'message': message['text'] }),cache: 'no-cache',credentials: 'same-origin',headers: {
'user-agent': 'Mozilla/4.0 MDN Example','content-type': 'text/html','X-CSRFToken': csrftoken
},method: 'POST',mode: 'cors',redirect: 'follow',referrer: 'no-referrer',})
.then(response => response.json()).then((json) => {
this.messages.push(json['message'])
})
div.scrollTop(div.prop('scrollHeight'));
}
else {
this.send_blank = true;
this.placeholder = "Please put in some text";
}
<div class="boxed">
<div>
<div id="chatbox">
<div id="app" class="container top-padding">
<div class="row">
<div class="col-md-8 offset-md-2 col-sm-12">
<div class="card col-md-6" v-for="message in messages" v-bind:class="{ 'user-message': message.user,'chat-message': message.chat_bot,'offset-md-6': message.chat_bot}">
<div class="card-body">
[[message.text]]
</div>
</div>
</div>
</div>
<div id="text-box" class="row top-padding">
<div class="col-md-8 offset-md-2 col-sm-12">
<textarea class="form-control" v-bind:placeholder="placeholder" v-model="input" v-bind:class="{ 'border-danger': send_blank}" v-on:change="check_content"></textarea>
<i class="fas fa-arrow-circle-right send-btn" v-on:click="add_message"></i>
</div>
</div>
</div>
</div>
</div> <form action="/action_page.php" class="form-container"> <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
这是我的html部分。
如果有人可以提出替代方案或我做错了什么,这将有所帮助。提前致谢...版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。