JavaScript 在溢出时自动滚动到底部

有时候，我们需要在一个对象溢出时自动滚动到底部，这是一个常见的需求。在本篇文章中，我们将介绍如何使用JavaScript来实现它。

使用scrollTop属性

我们可以使用 scrollTop 属性来控制一个对象的滚动位置。我们将使用该属性来计算对象的滚动位置，以滚动到最底部。这个属性包含一个HTML元素的垂直滚动条的位置。你可以使用如下代码获取到当前对象的 scrollTop 值:

const element = document.getElementById('myDiv');
const atBottom = element.scrollHeight - element.scrollTop === element.clientHeight;

其中， scrollHeight 给出元素内容的完整高度（包括已经在不可见区域的部分），而 scrollTop 给出元素滚动后相对于原点的距离。 clientHeight 是元素的可见高度。当 scrollHeight 减去 scrollTop 等于 clientHeight 时，我们就抵达了底部。

接下来，我们将使用如下代码将滚动条滚动到底部：

const element = document.getElementById('myDiv');
element.scrollTop = element.scrollHeight - element.clientHeight;

监听 scroll 事件

为了实现在溢出时自动滚动到底部，我们需要将对象的 scrollTop 设置为最大值。为了达到这个目标，我们需要监测对象的滚动事件，并在这个事件发生时将 scrollTop 属性设置为最大值。下面的代码展示了如何在 div 溢出时自动滚动到底部：

<div id="myDiv" style="height: 200px; overflow: auto;">
  <p>内容...</p>
  <p>内容...</p>
  <p>内容...</p>
</div>

const element = document.getElementById('myDiv');
element.addEventListener('scroll', () => {
  const atBottom = element.scrollHeight - element.scrollTop === element.clientHeight;
  if (atBottom) {
    element.scrollTop = element.scrollHeight - element.clientHeight;
  }
});

上面的代码创建了一个 scroll 事件监听器，在滚动发生时检查是否到达底部并设置 scrollTop 属性。

结论

使用 JavaScript 来实现在溢出时自动滚动到底部非常容易，我们只需要计算滚动位置并将其设置为元素的 scrollTop 属性即可。通过监视滚动事件，我们可以在溢出时自动滚动到底部。

参考

• Element.scrollTop
• Element.scrollHeight
• Element.clientHeight