近年来，随着网页设计日益成熟，用户对网页的要求也越来越高。而滚动条作为用户访问网页时最常接触的元素，也需要被重视。今天，我们将围绕“CSS滚动条样式”这个主题，为大家带来15种优雅实用的CSS滚动条样式，让你的页面更时尚。

1. 默认滚动条样式

首先我们来了解一下浏览器自带的默认滚动条样式。默认滚动条的样式可能会因浏览器差异而有所不同，但大多数浏览器会在滚动条上方添加一定的阴影效果，同时滚动条的颜色和宽度也存在差异。例如，Chrome浏览器的默认滚动条样式如下：

```

::-webkit-scrollbar {

width: 8px;

height: 8px;

background-color: #f5f5f5;

}

::-webkit-scrollbar-thumb {

background-color: #c1c1c1;

}

```

2. 隐藏滚动条样式

若希望隐藏滚动条，可以采用以下样式来实现：

```

body {

overflow: hidden;

}

```

但这种方式不允许用户操作滚动条，因此如果需要实现滚动功能，建议采用其他方式。

3. 自定义滚动条样式

在正式介绍本文的15种CSS滚动条样式之前，我们需要先了解一下如何自定义滚动条样式。

滚动条的样式设计主要是通过以下CSS伪类选择器来完成：

```

::-webkit-scrollbar：浏览器自带滚动条样式

::-webkit-scrollbar-track：滚动条背景样式

::-webkit-scrollbar-thumb：滚动条上移动块样式，用于显示滚动条上拖动的块

::-webkit-scrollbar-button：滚动条上的按钮样式（上、下、左、右）

::-webkit-scrollbar-corner：滚动条的四角样式

```

基本上，我们可以通过组合以上伪类选择器来实现更多的滚动条样式。

下面，我们就着手介绍本文的15种CSS滚动条样式吧！

4. 弱化滚动条样式

这种滚动条样式减少了滚动条的强烈感，给用户带来更加柔和的体验。

```

body::-webkit-scrollbar {

width: 8px;

}

body::-webkit-scrollbar-track {

background: #ebebeb;

}

body::-webkit-scrollbar-thumb {

background: #d6d6d6;

border-radius: 2px;

&:hover {

background: #a9a9a9;

}

}

```

5. 扁平滚动条样式

扁平滚动条样式让滚动条看起来更加扁平化，同时为用户提供了更好的触感和控制能力。

```

body::-webkit-scrollbar {

width: 8px;

}

body::-webkit-scrollbar-track {

background: #f2f2f2;

}

body::-webkit-scrollbar-thumb {

background: #babac0;

border-radius: 16px;

border: 4px solid #f2f2f2;

&:hover {

background: #a0a0a5;

}

}

```

6. 全透明滚动条样式

全透明滚动条样式隐藏了滚动条背景色，仅仅显示滚动块本身的样式。

```

body::-webkit-scrollbar {

width: 6px;

background-color: transparent;

}

body::-webkit-scrollbar-thumb {

background-color: rgba(0, 0, 0, 0.5);

border-radius: 3px;

}

```

7. 渐变色滚动条样式

这种滚动条样式采用渐变颜色，让页面看起来更加时尚和美观。

```

body::-webkit-scrollbar {

background-color: #f2f2f2;

width: 8px;

}

body::-webkit-scrollbar-thumb {

border-radius: 8px;

box-shadow: none;

background-image: linear-gradient(

to bottom,

#f4f4f4 0%,

#dadada 100%

);

border: 2px solid #f2f2f2;

}

```

8. 双色滚动条样式

这种滚动条样式呈双色分层，能够增加滚动条的立体感。

```

body::-webkit-scrollbar {

width: 8px;

}

body::-webkit-scrollbar-track {

box-shadow: inset 0 0 5px grey;

border-radius: 10px;

background-color: #f5f5f5;

}

body::-webkit-scrollbar-thumb {

background-color: #4286f4;

border-radius: 10px;

box-shadow: 0 0 15px #4286f4;

}

```

9. 3D滚动条样式

这种滚动条样式采用了3D的效果，给用户带来更加立体的视觉体验。

```

body::-webkit-scrollbar {

width: 8px;

}

body::-webkit-scrollbar-thumb {

background-color: rgba(126, 127, 131, 0.5);

border-radius: 10px;

box-shadow: inset 0px 0px 0px 4px #85888c,

inset 0px 0px 0px 5px #cdd1d6, inset 0px 0px 0px 6px #ccced3,

inset 0px 0px 0px 8px #f4f4f4, 0px 2px 2px rgba(0, 0, 0, 0.2);

}

```

10. 小方块滚动条样式

这种滚动条样式将滚动块变成了一个小方块，线条鲜明，让滚动条更加可见。

```

body::-webkit-scrollbar {

width: 10px;

height: 10px;

}

body::-webkit-scrollbar-thumb {

border-radius: 2px;

background-color: #ccc;

}

body::-webkit-scrollbar-thumb:hover {

background-color: #aaa;

}

```

11. 刺绣滚动条样式

这种滚动条样式采用了刺绣织物的效果，让滚动条看起来更有质感。

```

body::-webkit-scrollbar {

width: 10px;

height: 10px;

background-color: #f4f4f4;

}

body::-webkit-scrollbar-thumb {

background-color: #989898;

background-image: linear-gradient(

-45deg,

rgba(255, 255, 255, 0.2) 25%,

transparent 25%,

transparent 50%,

rgba(255, 255, 255, 0.2) 50%,

rgba(255, 255, 255, 0.2) 75%,

transparent 75%,

transparent

),

linear-gradient(

45deg,

rgba(255, 255, 255, 0.2) 25%,

transparent 25%,

transparent 50%,

rgba(255, 255, 255, 0.2) 50%,

rgba(255, 255, 255, 0.2) 75%,

transparent 75%,

transparent

);

background-size: 30px 30px;

border-radius: 2px;

}

```

12. 圆角滚动条样式

这种滚动条样式将滚动块和滚动条的轨道都变成了圆角，让页面看起来更加柔和。

```

body::-webkit-scrollbar {

width: 14px;

height: 14px;

}

body::-webkit-scrollbar-track {

border-radius: 7px;

background-color: #f1f1f1;

}

body::-webkit-scrollbar-thumb {

border-radius: 7px;

background-color: #888;

}

```

13. 亮色悬浮滚动条样式

这种滚动条样式采用了亮色悬浮效果，让滚动条看起来更加现代化。

```

body::-webkit-scrollbar {

width: 6px;

background-color: transparent;

}

body::-webkit-scrollbar-thumb {

background-color: #000;

opacity: 0.5;

transition: opacity 0.2s linear;

}

body::-webkit-scrollbar-thumb:hover {

opacity: 1;

}

```

14. 改变滚动条方向

这种滚动条样式将滚动条的方向改变了，让页面看起来更加别致。

```

body {

display: flex;

flex-direction: row;

overflow-y: hidden;

}

body::-webkit-scrollbar {

height: 10px;

}

body::-webkit-scrollbar-track {

background: #f1f1f1;

}

body::-webkit-scrollbar-thumb {

background-color: #888;

}

```

15. 左侧悬浮滚动条样式

这种滚动条样式将滚动条置于页面的左侧，让页面看起来更加特别。

```

.scrollbar::-webkit-scrollbar {

width: 12px;

height: 12px;

background-color: #f5f5f5;

}

.scrollbar::-webkit-scrollbar-thumb {

background-color: #000;

border-radius: 10px;

box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

}

.scrollbar {

position: fixed;

left: 0;

top: 0;

height: 100vh;

width: 12px;

}

```

以上就是本文的15种CSS滚动条样式。通过以上的示例，我们可以看出滚动条样式的不同变化，也明确了如何使用CSS来进行样式的自定义。在日常的网页设计中，您也可以根据需要来选择适合自己的滚动条样式。最后，祝愿您在自定义滚动条样式上有所发现，学有所获！