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

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

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

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

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


当前回答

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

myDiv.scrollTop = myDiv.lastChild.offsetTop

其他回答

如果这样做是为了滚动到聊天窗口的底部,请执行以下操作

在聊天中滚动到特定div的想法如下

1)每个聊天div由Person, time和message组成,在一个带有类chatContentbox的for循环中运行

2) querySelectorAll查找所有这样的数组。可以是400个节点(400个聊天)

3)最后一个

4) scrollIntoView ()

let lastChatBox = document.querySelectorAll('.chatContentBox'); 
lastChatBox = lastChatBox[lastChatBox.length-1]; 
lastChatBox.scrollIntoView(); 

有时候最简单的就是最好的解决方案: 我不知道这是否有帮助,它帮助我在我想要的时候滚动它。“y=”越高,滚动越向下,当然“0”表示顶部,例如“1000”可能是底部,“2000”或“3000”等等,这取决于你的页面有多长。 这通常在onclick或onmouseover按钮中起作用。

window.scrollTo(x=0,y=150);

试试下面的代码:

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

使用:

var element= $('element');
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.scrollTop(maxScrollTop);

或检查滚动到底部:

    var element = $(element);
    var maxScrollTop = element[0].scrollHeight - element.outerHeight();
    element.on('scroll', function() {
        if ( element.scrollTop() >= maxScrollTop ) {
            alert('scroll to bottom');
        }
    });

我的场景:我有一个字符串列表,我必须在其中添加用户给定的字符串,并自动滚动到列表的末尾。我已经固定了列表显示的高度,在此之后它应该溢出。

我试过@Jeremy Ruten的答案,它工作,但它滚动到(n-1)个元素。如果有人面临这种类型的问题,可以使用setTimeOut()方法解决。你需要修改代码如下:

setTimeout(() => {
    var objDiv = document.getElementById('div_id');
    objDiv.scrollTop = objDiv.scrollHeight
}, 0)

下面是我创建的StcakBlitz链接,其中显示了问题及其解决方案:https://stackblitz.com/edit/angular-ivy-x9esw8