CSS自定义设置滚动条样式总结
对div设置滚动条，设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏，接下来为大家介绍。
总结 一个滚动条的组成部分(通常设置前三个即可)：
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块（即滚动条滑块），能向上向下移动（或横向滚动条可往左往右移动）
::-webkit-scrollbar-track 滚动条的轨道（对应上图滚动条凹槽，里面装有Thumb，即滚动条滑块）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*定义滚动条样式（高宽及背景）*/ ::-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> </head> <body> <div style="height: 200px;overflow-y: scroll;background: #52cc8f;"> <p>Excel快速一次性删除表格中所有图片的三种方法</p> <p>WordPress降级到以前的版本的实现方法</p> <p>WordPress添加/移除多站点网络的默认页面</p> <p>dedecms织梦怎么去除“DedeCMS提示信息”的方法</p> <p>dedecms织梦首页标题被篡改或点击后跳转的赌博网站的解决方法</p> <p>zblog图片和其他文件防盗链的实现方法</p> <p>zblog安装提示：该数据库里已存在相关的表和数据，请更改表前缀或是更换清空数据库再安装的原因和解决方法</p> <p>Emlog修改微语限制字数的方法</p> <p>emlog过滤非法敏感词的方法</p> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知