本文摘自PHP中文网,作者青灯夜游,侵删。
css设置滚动条宽度的方法:首先使用“::-webkit-scrollbar”伪类选择器选中整个滚动条,然后通过width属性设置滚动条宽度,语法格式“::-webkit-scrollbar{width:宽度值;}”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
现在很多项目中都用到了滚动条,而且在有的时候,用到的是模拟滚动条,很多大型邮箱都是利用css样式来设置的,那么CSS如何设置滚动条宽度呢?
在css中,可以使用“::-webkit-scrollbar”伪类选择器和width属性来设置设置,语法格式如下:
1 2 3 | ::-webkit-scrollbar{
width :宽度值;
}
|
还可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块(即滚动条滑块),能向上向下移动(或横向滚动条可往左往右移动)
::-webkit-scrollbar-track 滚动条的轨道(对应上图滚动条凹槽,里面装有Thumb,即滚动条滑块)
::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /*滚动条样式*/
.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
width:4px;/*高宽分别对应横竖滚动条的尺寸*/
height:4px;
}
.cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius:5px;
-webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
background:rgba(0,0,0,0.2);
}
.cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);
}
|
实例:
1.、style部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < style >
/*定义滚动条样式(高宽及背景)*/
::-webkit-scrollbar {
width: 6px; /* 滚动条宽度, width:对应竖滚动条的宽度 height:对应横滚动条的高度*/
background: #007acc;
}
/*定义滚动条轨道(凹槽)样式*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 较少使用 */
border-radius: 3px;
}
/*定义滑块 样式*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
height: 100px; /* 滚动条滑块长度 */
background-color: #ccc;
}
</ style >
|
2、body部分
1 2 3 4 5 6 7 8 9 10 11 12 13 | < div style = "height: 200px;overflow-y: scroll;background: #52cc8f;" >
11111111
< p >11111111111111111111</ p >
< p >11111111111111111111</ p >
< p >11111111111111111111</ p >
< p >11111111111111111111</ p >
< p >11111111111111111111</ p >
< p >11111111111111111111</ p >
< p >11111111111111111111</ p >
< p >11111111111111111111</ p >
< p >11111111111111111111</ p >
< p >11111111111111111111</ p >
</ div >
|
效果图:
(学习视频分享:css视频教程)
以上就是css滚动条的宽度怎么设置的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
vue源码之目录结构的简单分析
css因mime类型不匹配而被忽略怎么办
利用css实现一个简单的对号效果
css有继承关系吗
css怎么把横着的字竖起来
css怎么隐藏按钮
css link与import的区别是什么
css怎么设置text不可编辑
html怎么添加css样式?
css代码是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css滚动条的宽度怎么设置