互联网常识：css滚动条的宽度怎么设置

导读跟大家讲解下有关css滚动条的宽度怎么设置，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说css滚动条的宽度怎么设置，小

跟大家讲解下有关css滚动条的宽度怎么设置，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说css滚动条的宽度怎么设置，小编也收集到了有关css滚动条的宽度怎么设置的相关资料，希望大家看到了会喜欢。

css设置滚动条宽度的方法：首先使用“::-webkit-scrollbar”伪类选择器选中整个滚动条，然后通过width属性设置滚动条宽度，语法格式“::-webkit-scrollbar{width:宽度值;}”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

现在很多项目中都用到了滚动条，而且在有的时候，用到的是模拟滚动条，很多大型邮箱都是利用css样式来设置的，那么CSS如何设置滚动条宽度呢？

在css中，可以使用“::-webkit-scrollbar”伪类选择器和width属性来设置设置，语法格式如下：

::-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 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

.cal_bottom::-webkit-scrollbar { width:4px; height:4px;}.cal_bottom::-webki不能上qqt-scrollbar-thumb { border-radius:5px; -webkit-box-shadow: int005pxrgba(0,0,0,0.2); background:rgba(0,0,0,0.2);}.cal_bottom::-webkit-scrollbar-track { -webkit-box-shadow: int005pxrgba(0,0,0,0.2); border-radius:0; background:rgba(0,0,0,0.1);}

实例：

1.、style部分

应届大学生入伍<style>  ::-webkit-scrollbar { width: 6px;  background: #007acc; }  ::-webkit-scrollbar-track { -webkit-box-shadow: int 0 0 6px rgba(0,0,0,0.3);  border-radius: 3px; }  ::-webkit-scrollbar-thumb { border-radius: 3px; height: 100px;  background-color: #ccc; } &l高中计划书t;/style>

2、body部分

<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>11111学习潜力111111111111111</p> <p>11111111111111111111</p> <p>11111111111111111111</p> </div>

效果图：

（学习视频分享：css视频教程）

以上就是css滚动条的宽度怎么设置的详细内容，更多请关注php中文网其它相关文章！

来源：php中文网