注:目前只能自定义修改webkit浏览器。
滚动条组成部分:
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
代码如下:
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 9px; /*滚动条宽度*/
height: 9px; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 0px; /*滚动条的背景区域的圆角*/
background-color: red;/*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 3px; /*滚动条的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: green; /*滚动条的背景颜色*/
}
效果如下:
如果需要对某个父容器div设置滚动条样式,如下:
div::-webkit-scrollbar{}
实例:
<div class="mydiv">
<p>本教程全面介绍 JavaScript 核心语法,从最简单的讲起,循序渐进、由浅入深,力求清晰易懂。所有章节都带有大量的代码实例,便于理解和模仿,可以用到实际项目中,即学即用。本教程适合初学者当作 JavaScript 语言入门教程,也适合当作日常使用的参考手册。</p>
</div>
<style>
.mydiv
{
width: 200px; height: 130px;
margin-top: 50px; margin-left: 50px;border: 1px solid #ddd;
overflow-y: scroll;
text-align: left;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.mydiv::-webkit-scrollbar
{
width: 9px; /*滚动条宽度*/
height: 9px; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
.mydiv::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 0px; /*滚动条的背景区域的圆角*/
background-color: red;/*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
.mydiv::-webkit-scrollbar-thumb
{
border-radius: 3px; /*滚动条的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: green; /*滚动条的背景颜色*/
}
</style>