我正在使用Ajax请求创建聊天,我试图让消息div滚动到底部没有太多运气。

我将所有内容都包装在这个div中:

#scroll {
    height:400px;
    overflow:scroll;
}

是否有一种方法来保持它滚动到底部默认使用JS?

有办法保持它滚动到ajax请求后的底部吗?


当前回答

在我的Angular 6应用中,我这样做了:

postMessage() {
  // post functions here
  let history = document.getElementById('history')
  let interval    
  interval = setInterval(function() {
    history.scrollTop = history.scrollHeight
    clearInterval(interval)
  }, 1)
}

clearInterval(interval)函数将停止计时器以允许手动上下滚动。

其他回答

可选择的解决方案

function scrollToBottom(element) {
  element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
}

如果你不想依赖scrollHeight,下面的代码可以帮助你:

$('#scroll').scrollTop(1000000);

使用jQuery, scrollTop用于为任何给定元素设置scollbar的垂直位置。还有一个漂亮的jquery scrollTo插件,用于滚动动画和不同的选项(演示)

var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;

如果你想使用jQuery的animate方法在向下滚动时添加动画,请检查下面的代码片段:

var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);

你可以像这样使用HTML DOM scrollIntoView方法:

var element = document.getElementById("scroll");
element.scrollIntoView();

你也可以,使用jQuery,附加一个动画到html,文档的主体通过:

$(“html,body”).animate({scrollTop:$(“#div-id”)[0].offsetTop}, 1000);

这将导致一个平滑的滚动到div顶部,id为“div-id”。