滚动到 div 的底部？

Question

滚动到 div 的底部？

1067

我正在使用Ajax请求创建一个聊天，我试图让消息div滚动到底部，但没有成功。

我将所有内容都装进了这个div中：

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

是否有一种使用JS默认情况下保持滚动到底部的方法？

在ajax请求后是否有一种保持滚动到底部的方法？

- dMix

在许多情况下，这可以通过仅使用 CSS实现。请参阅此答案。 - ashleedawg

你可以简单地使用Jquery来实现这个功能： code $(document).ready(function() { var chatMessagesDiv = $('#scroll'); chatMessagesDiv.scrollTop(chatMessagesDiv[0].scrollHeight); }); - Ravindu Lokumanna

35个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- moreirapontocom · Answer 1

在我的 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)函数将停止计时器，允许手动滚动到顶部/底部。

- veritas · Answer 2

如果这是为了滚动到聊天窗口底部，请执行以下操作：

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

1）每个包含人员、时间和消息的聊天 div 都在一个 for 循环中运行，其类为 chatContentbox。

2）querySelectorAll 查找所有这样的数组。它可能有 400 个节点（400 个聊天）。

3）转到最后一个。

4）scrollIntoView()。

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

- Mahdi Bagheri Varnosfatherani · Answer 3

使用：

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');
        }
    });

- SeekLoad · Answer 4

有时候最简单的方法是最好的解决方案：我不知道这是否有帮助，但它可以让我将页面滚动到任何想要的地方。 "y="值越高，它向下滚动得越多，当然，“0”表示顶部，例如“1000”可能是底部，或者“2000”或“3000”，具体取决于您的页面有多长。这通常在onclick或onmouseover按钮中起作用。

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

- user2341537 · Answer 5

将可滚动元素距离顶部的距离设置为元素的总高度。

const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight