| CSS | 您所在的位置：网站首页 › css滚动条样式修改 › CSS |
CSS
|
我们在使用CSS做页面的样式修改时，经常会遇到滚动条的样式修改的问题。如下所示：有两种修改滚动条默认样式的方法。 方法一： /* 滚动条样式 start */ .jsyzmx .macro-table .res_data::-webkit-scrollbar{ /*滚动条整体样式*/ width:10px; height:10px; } /* 小方块 */ .jsyzmx .macro-table .res_data::-webkit-scrollbar-thumb{ border-radius:15px; -webkit-box-shdow:inset 0 0 15px rgba(172,243,255,1); background:rgba(172,243,255,1); } /* 轨道 */ .jsyzmx .macro-table .res_data::-webkit-scrollbar-track{ border-radius:15px; -webkit-box-shdow:inset 0 0 15px rgba(24,51,72,1); background:rgba(24,51,72,1); } /* 滚动条样式 end */如图所示：
方法二： /* 滚动条默认样式 */ .list-item-course::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .list-item-course::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(157, 165, 183, 0.7); } .list-item-course::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED; } .list-item-course::-webkit-scrollbar-thumb:hover { background: #888888; /*鼠标移上滚动条样式*/ }如图所示：
代码如下： HTML： 啊口水都快撒酒疯尽快阿富汗就卡死的回复感觉安徽设计规范哈桑就恢复干啥和国家萨汗国感觉黑暗圣经干啥就和国家撒谎感觉啥价格和啥黄瓜就撒谎感觉啥价格和撒娇啊口水都快撒酒疯尽快阿富汗就卡死的回复感觉安徽设计规范哈桑就恢复干啥和国家萨汗国感觉黑暗圣经干啥就和国家撒谎感觉啥价格和啥黄瓜就撒谎感觉啥价格和撒娇啊口水都快撒酒疯尽快阿富汗就卡死的回复感觉安徽设计规范哈桑就恢复干啥和国家萨汗国感觉黑暗圣经干啥就和国家撒谎感觉啥价格和啥黄瓜就撒谎感觉啥价格和撒娇啊口水都快撒酒疯尽快阿富汗就卡死的回复感觉安徽设计规范哈桑就恢复干啥和国家萨汗国感觉黑暗圣经干啥就和国家撒谎感觉啥价格和啥黄瓜就撒谎感觉啥价格和撒娇CSS： .box { width:500px; height: auto; background: lightgreen; } .content { padding: 20px; height: 120px; overflow: scroll; } /* 方法一 */ /* 滚动条样式 start */ .jsyzmx .macro-table .res_data::-webkit-scrollbar{ /*滚动条整体样式*/ width:10px; height:10px; } /* 小方块 */ .jsyzmx .macro-table .res_data::-webkit-scrollbar-thumb{ border-radius:15px; -webkit-box-shdow:inset 0 0 15px rgba(172,243,255,1); background:rgba(172,243,255,1); } /* 轨道 */ .jsyzmx .macro-table .res_data::-webkit-scrollbar-track{ border-radius:15px; -webkit-box-shdow:inset 0 0 15px rgba(24,51,72,1); background:rgba(24,51,72,1); } /* 滚动条样式 end */ /* 方法二 */ /* 滚动条默认样式 */ .content::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .content::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(157, 165, 183, 0.7); } .content::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED; } .content::-webkit-scrollbar-thumb:hover { background: #888888; /*鼠标移上滚动条样式*/ } |
【本文地址】
公司简介
联系我们