【前端自学之路】滚动条的样式修改

浏览器默认滚动条

我们来先看下浏览器默认的滚动条样式

浏览器默认滚动条样式

图片中右边灰色滚动条,是不是有点丑?

确实丑啊,很多需求或者场景下,我们想要自己的滚动条样式,因此需要对滚动条样式进行CSS修改

那如何修改呢? 我们继续看下

如何控制滚动条样式

首先我们得知道滚动条分两种:

  • 水平滚动条
  • 垂直滚动条,上图就属于垂直滚动条

那我们以垂直滚动条为例

滚动条由三部分组成:滚动条、上下箭头方向、中间的轨道

我那么首先来看下滚动条整体样式

1
2
3
4
5
6
7
8
9
/**
* 这个是控制滚动条整体样式
* 控制垂直滚动条的宽度
* 或控制水平滚动条的高度
*/
::-webkit-scrollbar {
width: 10px;
height: 1px;
}

接下来看下滚动条里面的滑块

1
2
3
4
5
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
background: #535353;
}

最后来看下滚动条的轨道

1
2
3
4
5
::-webkit-scrollbar-track {
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background : #ededed;
}

结合这三个伪元素设置,我们来看下最终效果:

新的滚动条样式

上图中右侧就是我们修改后的滚动条样式了,是不是炫耀一点了…

开始在你的代码添加自己的滚动条样式吧

坚持原创技术分享,您的支持将鼓励我继续创作!