滚动条构造图
构造说明
::-webkit-scrollbar
: 滚动条的整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。::-webkit-scrollbar-button
: 滚动条两端的按钮。可以用display:none
让其不显示,也可以添加背景图片,颜色改变现实效果。::-webkit-scrollbar-track
: 外层轨道,可以用display:none
让其不显示,也可以添加背景图片,颜色改变现实效果::-webkit-scrollbar-track-piece
: 内层轨道,滚动条中间的部分(除去可以拖动的那部分)::-webkit-scrollbar-track-piece
: 滚动条里面可以拖动的部分::-webkit-scrollbar-corner
: 边角::-webkit-resizer
: 定义右下角拖动块的样式
用法
<div class="demo"></div>
<script>
demo::-webkit-scrollbar {
width: 10px;
height:9px;
}
</script>
其他属性同理