CSS 滚动条设置：显示方式、样式修改

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • • 1. 显示或隐藏滚动条
    • 2. 定制滚动条样式（Webkit内核浏览器）

在CSS中，你可以通过overflow属性来控制元素内容溢出时是否显示滚动条，以及如何显示滚动条。同时，对于Webkit内核的浏览器（如Chrome和Safari），还可以定制滚动条的样式。以下是一些关于滚动条设置的详细说明及示例代码。

1. 显示或隐藏滚动条

使用overflow属性来控制滚动条的显示：

• overflow: auto; 当内容溢出时自动显示滚动条。
• overflow: scroll; 总是显示滚动条，不论内容是否溢出。
• overflow: hidden; 总是隐藏滚动条，溢出内容不可见。
• overflow-x: 和 overflow-y: 分别控制水平和垂直方向的滚动条。

示例代码：

/* 当内容溢出时在Y轴上显示滚动条 */
.example {
  overflow-y: auto;
}

/* 始终显示滚动条 */
.always-scroll {
  overflow: scroll;
}

/* 隐藏滚动条 */
.hidden-scroll {
  overflow: hidden;
}

2. 定制滚动条样式（Webkit内核浏览器）

Webkit内核的浏览器支持通过特定的伪元素来定制滚动条样式：

示例代码：

/* 定制滚动条整体 */
::-webkit-scrollbar {
  width: 12px; /* 宽度 */
}

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

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

/* 滑块在鼠标悬停时改变颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

请注意，上述定制滚动条的CSS仅适用于使用Webkit内核的浏览器，对于Firefox或IE/Edge等其他浏览器，可能需要使用不同的属性或JavaScript插件来实现类似的效果。