详解css3自定义滚动条样式写法

详解 CSS3 自定义滚动条样式写法

CSS3 中提供了一种自定义滚动条的方法，可以通过 CSS 样式来控制滚动条的外观样式和布局等。下面将详细讲解如何实现自定义滚动条样式。

步骤1. 添加样式到滚动条

在 CSS3 中，我们可以使用 ::-webkit-scrollbar 伪元素来控制滚动条的样式。

::-webkit-scrollbar {  width: 10px;             /* 滚动条的宽度 */  height: 10px;            /* 滚动条的高度 */  background-color: #f1f1f1;         /* 滚动条的背景颜色 */}

步骤2. 自定义滚动条的拖拽滑块

::-webkit-scrollbar-thumb 伪元素可以控制滚动条的拖拽滑块的样式，可以通过 background-color 控制颜色，border-radius 控制圆角度数等。

::-webkit-scrollbar-thumb {  background-color: #555;       /* 滑块的颜色 */  border-radius: 5px;           /* 圆角的弧度 */}

步骤3. 控制滚动条的拖拽区域

使用 ::-webkit-scrollbar-track 伪元素，可以改变滑道的外观。

::-webkit-scrollbar-track {  background-color: #f1f1f1;    /* 滑道的背景颜色 */  border-radius: 0px;           /* 滑道边框圆角的效果，数字可以调整幅度 */}

步骤4. 控制滚动条的拖拽按钮

使用 ::-webkit-scrollbar-button 定义滚动条的四个按钮的样式。

::-webkit-scrollbar-button {  background-color: #ccc;       /* 按钮的背景颜色 */  width: 0px;                   /* 按钮宽度，设为0实际上就是限制了按钮宽度 */  height: 0px;                  /* 按钮高度，同理0表示没有按钮 */}

案例一：自定义滚动条

下面是一个自定义滚动条的 CSS3 代码示例，效果如图。我们可以通过修改样式来实现不同的滚动条外观。

.container::-webkit-scrollbar {  width: 8px;  height: 8px;}.container::-webkit-scrollbar-thumb {  background: rgba(0, 0, 0, 0.2);  border-radius: 10px;}.container::-webkit-scrollbar-track {  background: #ffffff;  border-radius: 10px;  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);}

案例二：双边阴影滚动条

下面是一个具有双边阴影效果的滚动条样式代码示例，效果如图。我们可以通过修改样式实现不同的滚动条效果。

.container::-webkit-scrollbar {  width: 16px;  background: #f5f5f5;  border-radius: 10px;}.container::-webkit-scrollbar-thumb {  background: #c1c1c1;  border-radius: 10px;  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.5), inset -2px -2px 2px rgba(255, 255, 255, 0.5);}.container::-webkit-scrollbar-track {  background: #f5f5f5;  border-radius: 10px;  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.1), inset -2px -2px 2px rgba(255, 255, 255, 0.5);}