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等）暂时不支持自定义滚动条样式。