css显示滚动条

/* 设置元素显示滚动条 */
.example {
  width: 200px;
  height: 150px;
  overflow: auto; /* 当内容超出容器大小时显示滚动条 */
  border: 1px solid #000;
}

/* 自定义滚动条样式（仅适用于Webkit浏览器，如Chrome和Safari） */
.example::-webkit-scrollbar {
  width: 10px; /* 滚动条宽度 */
}

.example::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条滑块颜色 */
  border-radius: 5px; /* 滑块圆角 */
}

.example::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条轨道颜色 */
}

解释说明：

• overflow: auto;：当元素的内容超出其容器的宽度或高度时，会自动显示滚动条。如果内容没有超出，则不会显示滚动条。
• ::-webkit-scrollbar：这是Webkit浏览器（如Chrome和Safari）特有的伪元素，用于自定义滚动条的外观。
• ::-webkit-scrollbar-thumb：用于设置滚动条滑块的颜色和样式。
• ::-webkit-scrollbar-track：用于设置滚动条轨道的颜色和样式。

如果你需要在其他浏览器中也自定义滚动条样式，可以考虑使用JavaScript库或CSS框架。