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

将<li>附加到<ul>的底部

1 个答案: