我正在制作一个聊天机器人。当用户给出新输入或通过 API 发送数据时,我想滚动到聊天框的底部。
它不滚动,滚动只是停留在同一位置,但数据正在添加到聊天框中
我已经尝试过其他聊天机器人的代码,但它也不起作用
var outputArea = $('#chat-output');
$('#user-input-form').on('submit', function (e) {
e.preventDefault();
var message = $('#user-input').val();
outputArea.append(`
<div class='bot-message'>
<div class='message'>
${message}
</div>
</div>
`);
const req = https.request(options, (res) => {
res.setEncoding('utf8');
res.on('data', (d) => {
const myobj = JSON.parse(d);
if ('narrative' in myobj.conversationalResponse.responses[0]) {
const temp = myobj.conversationalResponse.responses[0].narrative.text;
outputArea.append(`
<div class='user-message'>
<div class='message'>
${temp}
</div>
</div>
`);
} else if ('imageUrl' in myobj.conversationalResponse.responses[0]) {
const img = myobj.conversationalResponse.responses[0].imageUrl;
if ('narrative' in myobj.conversationalResponse.responses[1]) {
const text_r = myobj.conversationalResponse.responses[1].narrative.text;
outputArea.append(`
<div class='user-message'>
<div class ="message">
${text_r}
<a href=""></a>
</div>
</div>
`);
} else {
outputArea.append(`
<div class='user-message'>
<div class='message'>
<img src="" width="300" height="200">
</div>
</div>
`);
}
}
});
});
req.on('error', (error) => {
console.error(error);
});
req.write(data);
req.end();
$('#user-input').val('');
.form-container {
width: 400px;
height: 450px;
padding: 10px;
background-color: white;
overflow: scroll;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat-popup" id="myForm">
<div class="form-container">
<div class="chat-output" id="chat-output">
<div class="user-message">
<div class="message">Hi! I'm Bot, what's up?</div>
</div>
</div>
<div class="chat-input">
<form action="#0" id="user-input-form" autocomplete="off">
<input type="text" id="user-input" class="user-input" placeholder="Talk to the bot.">
</form>
</div>
</br></br>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</div>
</div>
另一个有趣的方法是使用纯 CSS,使用flex-direction
方法,它通过为内容创建一个包装器来工作inside滚动元素。
我在下面制作了一个快速演示(带有一个按钮和一些用于添加新项目的 JavaScript)。您还可以查看这个单独的演示页面 https://code.hnldesign.nl/scrolltobottom/.
诀窍在于使用反转内容方向column-reverse
在滚动条中。由于物品位于另一个容器中,因此它们不会“翻转”,而是始终排列在底部。事实上,每当添加内容时,这都会使滚动条滚动到底部。
额外的好处:保持滚动位置(主要是*)
另外,这是我非常喜欢这个方法的一点;每当用户开始滚动(向上)时,添加内容时滚动条不会丢失其滚动位置。因此,如果它已经滚动(默认情况下或由用户)到底部,它只会“粘”到底部。这可确保不会出现烦人的内容跳跃,从而提供更好的用户体验。
* 大多数情况下,因为只有 iOS Safari 不支持overflow-anchor
,因此无论用户滚动位置如何,它都会始终滚动容器。看https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor#browser_compatibility
Demo
let scrollerContent = document.getElementById('scrollerContent');
document.getElementById('addItems').addEventListener('click', function() {
let newChild = scrollerContent.lastElementChild.cloneNode(true);
newChild.innerHTML = "Item " + (scrollerContent.children.length + 1);
scrollerContent.appendChild(newChild);
});
.scroller {
overflow: auto;
height: 100px;
display: flex;
flex-direction: column-reverse;
overflow-anchor: auto !important; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor */
}
.scroller .scroller-content .item {
height: 20px;
transform: translateZ(0); /* fixes a bug in Safari iOS where the scroller doesn't update */
}
<div class="scroller">
<div class="scroller-content" id="scrollerContent">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
</div>
</div>
<br/><br/>
<button id="addItems">Add more items</button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)