添加新消息时滚动到底部

Question

我正在制作一个聊天机器人。 当用户给出新输入或通过 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>

Answer 1

这对我有用：

outputArea[0].scrollTop = 9e9; 

Answer 2

您可以使用scrollTop来实现它。

我简单写了一个例子供大家参考，你会发现scrollTop的实现方式有两种，一种是使用动画包装器，另一种是直接使用，大家可以比较一下两种方式的区别。

 const sendMessage = (selector, isAnimate = true) => { const text = $(selector).val(); const $container = $('.form-container'); $container.append(`<p>${text}</p>`); if (isAnimate) { $container.animate({ scrollTop: $container.prop('scrollHeight') }, 1000); } else { $container.scrollTop($container.prop('scrollHeight')); } $(selector).val(''); }; $('button:eq(0)').on('click', function() { sendMessage('input[type=text]'); }); $('button:eq(1)').on('click', function() { sendMessage('input[type=text]', false); });

 .form-container { width: 400px; height: 100px; 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='form-container'> <p>This is line 1 of text</p> <p>This is line 2 of text</p> </div> <div> <input type='text' placeholder="Type a message."> <button type='button'>Use animation</button> <button type='button'>Don't use animation</button> </div>

Answer 3

另一个有趣的方法是使用纯 CSS，使用flex-direction方法，它通过为滚动元素内的内容创建一个包装器来工作。

我在下面做了一个快速演示（带有一个按钮和一些用于添加新项目的 JavaScript）。

诀窍在于使用滚动条中的column-reverse来反转内容方向。 因为这些项目在另一个容器中，所以它们不会被“翻转”，而是总是排在底部。 实际上，这会使滚动条在添加内容时滚动到底部。

额外奖励：保持滚动位置

另外，这是我非常喜欢这种方法的地方； 每当用户开始滚动（向上）时，滚动条在添加内容时不会丢失其滚动位置。 因此，如果它已经（默认情况下或由用户）滚动到底部，它只会“粘”到底部。 这确保没有烦人的内容跳跃，提供更好的用户体验。

演示

 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; } .scroller .scroller-content .item { height: 20px; }

 <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>