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

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

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

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

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


当前回答

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

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

其他回答

我发现这真的很有用,谢谢。

对于Angular 1。在座的X位朋友:

angular.module('myApp').controller('myController', ['$scope', '$document',
  function($scope, $document) {

    var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div');
    overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;

  }
]);

只是因为在jQuery元素和HTML DOM元素中包装有点让人困惑。

同样对于聊天应用程序,我发现在你的聊天加载后进行分配是有用的,你也可能需要在短的超时。

试试下面的代码:

const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

你也可以使用Jquery使滚动平滑:

const scrollSmoothlyToBottom = (id) => {
    const element = $(`#${id}`);
    element.animate({
        scrollTop: element.prop("scrollHeight")
    }, 500);
}

下面是演示

下面是它的工作原理:

参考:scrollTop, scrollHeight, clientHeight

为什么不使用简单的CSS来做到这一点呢?

诀窍是使用display: flex;和弯曲方向:列反向;

Here is a working example. https://codepen.io/jimbol/pen/YVJzBg

以下是我在我的网站上使用的:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

滚动到div内的最后一个元素:

myDiv.scrollTop = myDiv.lastChild.offsetTop