滚动到 div 的底部？

Question

我正在使用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

Answer 1

这是我在我的网站上使用的内容：

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

- Jeremy Ruten

---

这个方法在所有浏览器中都可以使用吗？ - jondinham

为什么不使用 scrollTopMax 而是 scrollHeight？ - aiven

当我动态添加图片时，这个好像不起作用 :( - john k

现代的方式是使用 Element.scrollIntoView() -- https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView - MichielB

@aiven scrollTopMax 是非标准的，请参见 https://caniuse.com/mdn-api_element_scrolltopmax - Tobia

Answer 2

如果你正在使用 jQuery scrollTop，这会更容易：

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);

- andsien

---

您需要使用 [0] 从 jQuery 元素中获取 DOM 元素，以获取 scrollHeight。 - Jimmy Bosse

$("#mydiv").scrollTop(function() { return this.scrollHeight; }); 可以让页面滚动到元素的底部。 - Eric

Answer 3

尝试以下代码：

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

- Tho

Answer 4

使用jQuery animate：

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

- DadViegas

---

请注意这个答案使用了 .stop()，这可以防止多个动画冲突的问题。 - kalyfe

Answer 5

适用于所有现代浏览器的新方法：

this.scrollIntoView(false);

- tnt-rox

---

这应该是被接受的答案，因为旧的方法已经不再适用了。 - rbansal

如果“this”是可以滚动到的div中的某个内容，那么就会出现这种情况。 - mplungjan

方法scrollIntoView在父容器内的子元素上触发。那么如何使用它来将父容器滚动到底部（正如原问题所问）。 - Gil Epshtain

你可以使用scrollIntoView({ behavior: "smooth", block: "end" });。该代码可使页面平滑地滚动至目标元素底部位置。 - giovannipds

请在此处查看支持的浏览器 https://caniuse.com/?search=scrollIntoView - Akira Yamamoto

这会滚动整个页面，而不是目标元素（Chrome） - Cybernetic

Answer 6

var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

jQuery 1.6及以上版本适用

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

- Akira Yamamoto

Answer 7

用 JavaScript 实现平滑滚动：

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });

- adl

Answer 8

替代方案

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

- Ahmet Şimşek

---

非常好的答案，已经测试并且运行良好。谢谢。 - Kayote

Answer 9

如果您不想依赖于 scrollHeight，以下代码可以帮助：

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

- Benny Code

---

看起来像是黑客攻击。那个1000000数字的意思是什么？ - Evgeniy Boytsov

Answer 10

我的情境：我有一个字符串列表，在其中我必须添加一个由用户给定的字符串，并自动滚动到列表的末尾。显示列表的高度是固定的，此后它应该溢出。

我尝试了 @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

- ngShravil.py

---

使用setTimeout()，它的工作正常。与Angular 9一起使用，挽救了我的一天。 - Anjali Sharma

很高兴能帮助 :) - ngShravil.py