显示滚动条css：CSS滚动条样式定制指南

来源：网络作者：日期：2025-11-10 02:27:36

什么是CSS滚动条？

CSS滚动条是用户界面中用于浏览超出可见区域内容的交互元素,默认情况下，浏览器会提供基本的滚动条样式，但现代Web设计往往需要自定义滚动条以匹配整体设计风格。

基本的滚动条自定义

在Webkit浏览器中,可以使用以下CSS代码来定制滚动条：

/* 基本滚动条样式 */
::-webkit-scrollbar {
  width: 12px;  /* 水平滚动条高度 */
  height: 12px; /* 垂直滚动条宽度 */
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 10px;
}
/* 滚动条两端按钮 */
::-webkit-scrollbar-button {
  background: #ccc;
}

滚动条各部分详细定制

滚动条轨道

::-webkit-scrollbar-track {
  background-image: linear-gradient(0deg, transparent 0%, transparent 30%, 
                        #f1f1f1 30%, #f1f1f1 70%, transparent 70%, transparent 100%);
}

滚动条滑块

::-webkit-scrollbar-thumb {
  background: #4a90e2;
  border-radius: 10px;
  border: 3px solid #f1f1f1;
}
/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
  background: #3a70b2;
}

滚动条两端按钮

::-webkit-scrollbar-button:vertical:start:increment {
  background: #4a90e2;
  color: white;
}
::-webkit-scrollbar-button:vertical:start:increment:active {
  background: #3a70b2;
}

兼容性考虑

需要注意的是,CSS滚动条定制主要针对Webkit浏览器，其他浏览器如Firefox、Edge等支持程度不同，对于Firefox，可以使用以下替代方案：

/* Firefox滚动条 */
scrollbar-width: thin; /* 可选值：auto, thin, none */
scrollbar-color: #4a90e2 #f1f1f1;

实际应用示例

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 300px;
  height: 200px;
  overflow: auto;
}
/* 自定义滚动条 */
.container::-webkit-scrollbar {
  width: 10px;
}
.container::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.container::-webkit-scrollbar-thumb {
  background: #4a90e2;
  border-radius: 5px;
}
.container::-webkit-scrollbar-thumb:hover {
  background: #3a70b2;
}
</style>
</head>
<body>
<div class="container">
  <!-- 大量内容 -->
  <div style="height: 1000px;"></div>
</div>
</body>
</html>