如何使 div 可垂直滚动顺风 css

有时候我们需要在一个固定高度的 div 内部显示很多内容，超出固定高度的部分需要滚动显示。这个需求可以通过 CSS 实现，本文将介绍如何使 div 可垂直滚动顺风。

基本实现思路

一般情况下，我们需要在一个固定高度的 div 中显示内容，超出部分需要滚动显示。这个需求可以通过设置 overflow 属性来实现，具体做法如下：

.scrollable {
  height: 200px; /* 固定高度 */
  overflow: auto; /* 自动显示滚动条 */
}

上述代码会将 scrollable 类所在的 div 设置为固定高度的 200px，同时自动显示滚动条。如果内容超过这个高度，就会出现垂直滚动条。如果内容不足，则不会出现垂直滚动条。

美化滚动条

默认情况下，滚动条并不好看。我们可以通过一些技巧美化它。以下是一些基本的美化滚动条的方法：

修改滚动条宽度和颜色

可以使用以下代码修改滚动条的宽度和颜色：

.scrollable::-webkit-scrollbar {
  width: 8px; /* 宽度 */
}

.scrollable::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 颜色 */
}

上述代码会将 scrollable 类所在的 div 中的滚动条宽度设置为 8px，颜色设置为 #ccc。

隐藏滚动条

可以使用以下代码将滚动条完全隐藏：

.scrollable::-webkit-scrollbar {
  display: none;
}

上述代码会将 scrollable 类所在的 div 中的滚动条完全隐藏。

总结

通过设置 overflow 属性，可以使 div 可以垂直滚动显示。我们还可以通过修改滚动条宽度和颜色、隐藏滚动条等方法美化滚动条。