CSS 让溢出的 div 保持滚动到底部，除非用户向上滚动

在本文中，我们将介绍如何使用 CSS 实现一个效果：当一个 div 内容超出了容器的高度，希望让 div 自动滚动到底部，除非用户手动向上滚动。

阅读更多：CSS 教程

使用 overflow 属性来控制滚动条

在 CSS 中，我们可以使用 overflow 属性来控制元素滚动的方式。overflow 属性有四个值可选：visible、hidden、scroll 和 auto。

visible：默认值，内容超出容器的部分会显示在容器外面。
hidden：内容超出容器的部分会被隐藏掉。
scroll：容器会显示滚动条，无论是否需要滚动，都会显示滚动条。
auto：容器会根据内容是否超出容器自动判断是否显示滚动条。

实现滚动到底部的效果

要实现 div 在内容溢出时保持滚动到底部的效果，我们可以使用 scroll 或 auto 的值作为 overflow 属性的值，并结合 JavaScript 来实现。

首先，我们需要一个 div 容器：

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

接下来，我们给容器设置样式：

.container {
  height: 200px;
  overflow-y: scroll;
}

这样，当内容超过 200px 的高度时，容器会显示滚动条。接下来，我们可以结合 JavaScript 来滚动容器到底部。

var container = document.querySelector('.container');
container.scrollTop = container.scrollHeight;

在这个例子中，我们使用了 scrollHeight 属性来获取容器的滚动高度，并将滚动条的位置设置为滚动高度，这样就能保持容器滚动到底部。

示例

下面是一个完整的示例，演示了如何使用 CSS 和 JavaScript 实现滚动到底部的效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 200px;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <!-- 内容 -->
    </div>
  </div>

  <script>
    var container = document.querySelector('.container');
    container.scrollTop = container.scrollHeight;
  </script>
</body>
</html>