共计 804 个字符,预计需要花费 3 分钟才能阅读完成。
一、滚动条相干的属性
::-webkit-scrollbar 滚动条整体局部,罕用属性:width,height,background,border;::-webkit-scrollbar-button 滚动条两边的按钮,默认不设置时不显示,可设置高度、背景色、背景图片;::-webkit-scrollbar-track 整个滚动条去除两边按钮剩下的局部;::-webkit-scrollbar-track-piece track 去掉拖拽剩下的局部;::-webkit-scrollbar-thumb 滚动条外面能够拖动的那局部;::-webkit-scrollbar-corner 边角;::-webkit-resizer 定义右下角拖动块的款式
二、根底改变,上例子
<div class="box">
<div>1fnreknenverknrefnrenfengrnengej1fnreknenverknrefnrenfengrnengejk1fnreknenverknrefnrenfengrnengejk1fnreknenverknrefnrenfengrnengejkk</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
.box {
width: 300px;
height: 100px;
overflow: scroll;
}
div::-webkit-scrollbar {
width: 8px; /* 纵向滚动条的宽 */
height: 8px; /* 横向滚动条的高 */
}
div::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #EBEBEB;
}
三、成果
注:只对 设置了高度和滚动成果的容器
失效
正文完