蓁祎家进步中

# 滚动条

返回：一般常见样式处理及开发技巧

# CSS3自定义滚动条样式

返回顶部

滚动条

可以美美。但是，也只能玩玩，因为只针对webkit内核的浏览器啊啊啊啊啊
overflow 属性指定当它溢出其块级容器时,是否剪辑内容，渲染滚动条或显示内容

overflow:visible    //默认值。内容不会被修剪，超出内容会显示在元素框之外
overflow:hidden     //内容会被修剪。超出内容被隐藏
overflow:scroll     //内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow:auto       //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit     //规定从该父元素继承overflow属性的值
1
2
3
4
5

任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

  • 使用overflow-x和overflow-y可分别设置水平及垂直方向上的滚动条。

# 自定义滚动条实现

此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式

::-webkit-scrollbar                滚动条整体部分
::-webkit-scrollbar-thumb          滚动条里面的小方块，能向上向下移动（或向左向右移动）
::-webkit-scrollbar-track          滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button         滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece    内层轨道，滚动条中间部分
::-webkit-scrollbar-corner         边角，即垂直滚动条和水平滚动条相交的地方
::-webkit-resizer                  两个滚动条的交汇处上用于拖动调整元素大小的小控件
1
2
3
4
5
6
7

1727565-76071eeac4e38a91.jpg

<div class="box box7">
    <p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
        scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。
    </p>
</div>
1
2
3
4
5
.box8::-webkit-scrollbar {
    width: 12px;
    background-color: #eee;
}

.box8::-webkit-scrollbar-track {
    background-color: #eee;
}

.box8::-webkit-scrollbar-thumb {
    background: #3DB6A4;
}

.box8::-webkit-scrollbar-button:start {
    background: url(./imgs/up.png) no-repeat;
    background-size: 12px 12px;
}

.box8::-webkit-scrollbar-button:end {
    background: url(./imgs/down.png) no-repeat;
    background-size: 12px 12px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 隐藏垂直滚动条

返回顶部

scrollbar-width: none;
1

针对chrome和safari还可以如下

.element::-webkit-scrollbar { width: 0 !important }
1

# 强制出现垂直滚动条

返回顶部

html { height: 101% }
1