近年来,随着网页设计日益成熟,用户对网页的要求也越来越高。而滚动条作为用户访问网页时最常接触的元素,也需要被重视。今天,我们将围绕“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来进行样式的自定义。在日常的网页设计中,您也可以根据需要来选择适合自己的滚动条样式。最后,祝愿您在自定义滚动条样式上有所发现,学有所获!