CSS - 使用css自定义滚动条样式 以你之姓@ 2021-07-26 01:49 527阅读 0赞 ### 使用css自定义滚动条样式 ### * 一. 隐藏滚动条 * 二. 修改滚动条样式 * * Chrome(WebKit的浏览器) * IE浏览器 # 一. 隐藏滚动条 # * 谷歌浏览器 .box::-webkit-scrollbar{ display: none; } * IE浏览器 .box{ -ms-overflow-style: none; } # 二. 修改滚动条样式 # ## Chrome(WebKit的浏览器) ## 可以使用以下伪元素选择器去修改webkit浏览器的滚动条样式: <table> <thead> <tr> <th align="left">属性</th> <th align="left">说明</th> </tr> </thead> <tbody> <tr> <td align="left">::-webkit-scrollbar</td> <td align="left">滚动条整体部分</td> </tr> <tr> <td align="left">::-webkit-scrollbar-track</td> <td align="left">外层轨道(滚动条的轨道)</td> </tr> <tr> <td align="left">::-webkit-scrollbar-track-piece</td> <td align="left">内层轨道</td> </tr> <tr> <td align="left">::-webkit-scrollbar-track-thumb</td> <td align="left">滚动条里面的滑块</td> </tr> <tr> <td align="left">::-webkit-scrollbar-track-button</td> <td align="left">滚动条的轨道的两端按钮</td> </tr> <tr> <td align="left">::-webkit-scrollbar-track-corner</td> <td align="left">边角,即两个滚动条的交汇处</td> </tr> </tbody> </table> * 轨道的颜色的优先级,即: `::-webkit-scrollbar-track-piece` > `::-webkit-scrollbar-track` > `::-webkit-scrollbar` * 使用语法: box::-webkit-scrollbar { styles here } ## IE浏览器 ## <table> <thead> <tr> <th align="left">属性</th> <th align="left">说明</th> </tr> </thead> <tbody> <tr> <td align="left">scrollbar-base-color</td> <td align="left">滚动条基准颜色</td> </tr> <tr> <td align="left">scrollbar-highlight-color</td> <td align="left">滚动条整体颜色</td> </tr> <tr> <td align="left">scrollbar-track-color</td> <td align="left">滚动条轨道颜色</td> </tr> <tr> <td align="left">scrollbar-arrow-color</td> <td align="left">三角箭头的颜色</td> </tr> <tr> <td align="left">scrollbar-face-color</td> <td align="left">滚动条滑块按钮的颜色</td> </tr> <tr> <td align="left">scrollbar-shadow-color</td> <td align="left">滚动条阴影</td> </tr> </tbody> </table> * 使用语法 .box{ /*滚动条基准颜色*/ scrollbar-base-color: green; /*滚动条整体颜色*/ scrollbar-highlight-color: blue; /*滚动条轨道颜色*/ scrollbar-track-color: yellow; /*三角箭头的颜色*/ scrollbar-arrow-color: white; /*滚动条滑块按钮的颜色*/ scrollbar-face-color: red; /*滚动条阴影*/ scrollbar-shadow-color: red; }
还没有评论,来说两句吧...