javascript - 将 附加到 的底部

Question

这是我的代码:

var message;
var ul = $('.chat');
var btn = $('#btnEnviar');

btn.click(()=>{
  message = $('#Mensaje').val()
  ul.append('<li>'+message+'</li>');
})
$('#Mensaje').keyup((e)=>{
  (e.which === 13) && ul.append('<li>'+$('#Mensaje').val()+'</li>')
})

rest of the code is here:
[https://codepen.io/willmsha/pen/zyQVPb][1]

正如你们所看到的，在向 ul 添加新消息几次后，我必须向下滚动。

除了使用类似这样的东西，是否有机会阻止这种情况:

window.scrollTo(0,document.body.scrollHeight);

所以我想做的是将 li 标签附加到 ul 的底部，这样我就不必在添加新消息时向下滚动。

Answer 1

只需使用 .scrollIntoView() 方法。将此添加到您的 btn.click 监听器:

var children = document.getElementsByClassName("chat")[0].childNodes;

children[children.length-1].scrollIntoView();

在这里阅读更多相关信息:https://www.w3schools.com/jsref/met_element_scrollintoview.asp