使用 CSS 使 div 可垂直滚动

在 web 开发中，我们经常需要在页面中显示长文本或者大量内容，如果直接将所有内容展示在一个容器中，很容易导致页面不好看，用户体验也不佳。这时候我们可以使用垂直滚动条来优化页面设计。本文将介绍如何使用 CSS 实现 div 的垂直滚动。

使用 overflow 属性

CSS 的 overflow 属性可以指定元素在内容溢出时的表现方式，包括可见、自动、隐藏和滚动四种模式。我们可以将 div 的 overflow 属性设置为 auto 或 scroll 来实现垂直滚动。其中，auto 表示只有内容超过容器高度时才显示滚动条，scroll 则始终显示滚动条，无论内容是否超过容器高度。下面是代码示例：

div {
  height: 200px; /* 指定 div 的高度 */
  overflow: auto; /* 显示滚动条，只有内容超过容器高度时才显示 */
}

<div>
  <p>这是一段很长的文本，需要滚动才能看到全部内容。</p>
  <p>这是一段很长的文本，需要滚动才能看到全部内容。</p>
  <p>这是一段很长的文本，需要滚动才能看到全部内容。</p>
  <!-- 省略若干段文本 -->
</div>

在上面的代码中，div 的高度为 200px，当 p 标签的内容超过 div 的高度时，会显示垂直滚动条。需要注意的是，垂直滚动条可能会占据一定的空间，需要根据实际需要调整容器高度，以防止页面布局出现问题。

使用 ::-webkit-scrollbar 属性

除了使用 overflow 属性外，还可以使用 ::-webkit-scrollbar 属性对滚动条进行自定义。这个属性只在 Webkit 内核的浏览器中有效，包括 Chrome、Safari 等。我们可以通过 ::-webkit-scrollbar 的伪元素来设置滚动条的样式和颜色。

div::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}
 
div::-webkit-scrollbar-thumb {
  background-color: #cdcdcd;
  border-radius: 8px;
}

在上面的代码中，我们给 div 元素的滚动条设置了宽度为 10px，高度为 10px，背景颜色为 #f5f5f5，滚动条拇指部分的背景颜色为 #cdcdcd，边角半径为 8px。可以根据实际需求调整样式。

需要注意的是，使用 ::-webkit-scrollbar 属性只能修改外观样式，无法改变滚动条行为。如果需要自定义滚动条的行为，还需要借助 JavaScript 实现。

总结

以上就是使用 CSS 实现 div 垂直滚动的方法。可以根据需求使用 overflow 或者 ::-webkit-scrollbar 属性对滚动条进行设置。在实际开发中，还需要根据页面设计和用户体验进行调整，以达到更好的效果。