CSS--超出就显示滚动条并设置滚动条的样式
原文网址：CSS--超出就显示滚动条并设置滚动条的样式_IT利刃出鞘的博客-CSDN博客
简介
本文介绍HTML如何超出就显示滚动条并设置滚动条的样式。
超出就显示滚动条
方法如下：
第一步：设置父容器的高度（height或者max-height）
第二部：设置父容器的overflow: auto; 或overflow: scroll
例如：
.container {max-height: 80vh;overflow: auto;
}滚动条的样式
在 CSS 中，有以下几种选择器可以用于设置滚动条的样式：
- ::-webkit-scrollbar：用于设置滚动条样式。
- ::-webkit-scrollbar-track：用于设置滚动条轨道的样式。
- ::-webkit-scrollbar-thumb：用于设置滚动条滑块的样式。
- ::-webkit-scrollbar-button：用于设置滚动条两端的按钮样式。
- ::-webkit-scrollbar-track-piece：用于设置滚动条轨道中间区域的样式。
- ::-webkit-scrollbar-corner：用于设置滚动条两个轨道的交叉区域（角落）的样式。
- ::-webkit-resizer：用于设置滚动条调整大小的控制点的样式。
这些选择器都是针对 WebKit 内核浏览器（Chrome和Safari等）的特定伪元素，并且只能在这些浏览器中生效。Firefox和IE等不支持这些样式，它们有自己的定义方式。
示例（Chrome和Safari等浏览器）：
/* 设置滚动条的宽度 */
::-webkit-scrollbar {width: 10px; /* 滚动条宽度 */
}/* 设置滚动条轨道的背景颜色 */
::-webkit-scrollbar-track {background-color: #f1f1f1;
}/* 设置滚动条滑块的背景颜色 */
::-webkit-scrollbar-thumb {background-color: #888;
}/* 设置滚动条滑块悬停时的背景颜色 */
::-webkit-scrollbar-thumb:hover {background-color: #555;
}
Firefox浏览器
/* 注意：Firefox 浏览器需要同时设置 scrollbar-width 和 scrollbar-color 来生效 */
/* 此示例将滚动条设置为红色，滑块设置为绿色 */
* {scrollbar-width: thin;scrollbar-color: green red;
}其他浏览器
其他浏览器（如IE、Edge等）暂时不支持自定义滚动条样式。