用css美化你的浏览器滚动条

发表于   |     |   阅读次数

前言

总所周知，各大浏览器自带的滚动条样式在pc端比较单调无趣，爱美的童鞋也许不会喜欢这样的默认设置，有没有什么办法可以让我们随心所欲的定制属于自己的滚动条样式呢？好消息是有办法滴，但是还有一个坏消息，那就是到目前为止，几乎只有webkit内核的浏览器支持定制滚动条，其他浏览器要么完全不支持自定义，要么就是只支持自定义部分滚动条属性，所以本文暂时只谈怎么在webkit内核浏览器中修改滚动条

滚动条构造初体验

首先让我们来看一下滚动条大致由哪些部分组成，留图不留种，菊花万人捅，一图胜千言，请看下图。

困

构造说明

  1. ::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
  2. ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
  3. ::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
  4. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）。
  5. ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
  6. ::-webkit-scrollbar-corner 边角
  7. ::-webkit-resizer 定义右下角拖动块的样式

例子

我们运用上面的伪类来修改webkit内核的滚动条，可以先预览一下一个简单的demo

点击预览

开始分析

1
2
3
4
5
6
7
8
9
10
11
<div class="box">
  <div class="inner">
    我是默认的滚动条
  </div>
</div>
<div class="box demo">
  <div class="inner">
    我是自定义的滚动条
  </div>
</div>

html的结构非常简单，就是为了演示例子准备的两个div滚动容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
.box{
  width: 400px;
  height: 400px;
  border: solid 1px green;
  float: left;
  margin-right: 30px;
  overflow: scroll;
}
.inner{
  height: 700px;
  width: 700px;
  font: 40px/400px "微软雅黑";
  text-align: center;
}
/*滚动条整体部分*/
.demo::-webkit-scrollbar{
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background-color: #f0f0f0;
}
/*滚动条两端的箭头*/
.demo::-webkit-scrollbar-button{
  display: none;
}
/*经测试好像并不能控制什么*/
.demo::-webkit-scroll-track{
  display: none;
}
/*滚动条内侧部分 去掉*/
.demo::-webkit-scrollbar-track-piece {
  display: none;
}
/*滚动条中可以拖动的那部分*/
.demo::-webkit-scrollbar-thumb{
  background-color: green;
  border-radius: 4px;
}
/*变角部分*/
.demo::-webkit-scrollbar-corner {
  display: none;
}
.demo::-webkit-resizer{
  display: none;
}

最后得到效果如下图 图丑莫怪

困

结语

虽然webkit内核浏览器允许我们自定义滚动条样式，但是这是不兼容的，其他浏览器下该是什么样子就是什么样子，所以想要滚动条一致性体验，还是用元素模拟的形式把，而且用css自定义样式的情况会产生一个新的问题，那就是会覆盖移动端下滚动条样式