CSS | 如何更改滚动条的默认样式
【摘要】 我们在使用CSS做页面的样式修改时，经常会遇到滚动条的样式修改的问题。如下所示：有两种修改滚动条默认样式的方法。方法一：/* 滚动条样式 start */.jsyzmx .macro-table .res_data::-webkit-scrollbar{ /*滚动条整体样式*/ width:10px; height:10px;}/* 小方块 */.jsyzmx .macro-table ....
我们在使用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：
<body>
<div class="box">
<p class="content">啊口水都快撒酒疯尽快阿富汗就卡死的回复感觉安徽设计规范哈桑就恢复干啥和国家萨汗国感觉黑暗圣经干啥就和国家撒谎感觉啥价格和啥黄瓜就撒谎感觉啥价格和撒娇啊口水都快撒酒疯尽快阿富汗就卡死的回复感觉安徽设计规范哈桑就恢复干啥和国家萨汗国感觉黑暗圣经干啥就和国家撒谎感觉啥价格和啥黄瓜就撒谎感觉啥价格和撒娇啊口水都快撒酒疯尽快阿富汗就卡死的回复感觉安徽设计规范哈桑就恢复干啥和国家萨汗国感觉黑暗圣经干啥就和国家撒谎感觉啥价格和啥黄瓜就撒谎感觉啥价格和撒娇啊口水都快撒酒疯尽快阿富汗就卡死的回复感觉安徽设计规范哈桑就恢复干啥和国家萨汗国感觉黑暗圣经干啥就和国家撒谎感觉啥价格和啥黄瓜就撒谎感觉啥价格和撒娇</p>
</div>
</body>CSS：
<style>
.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; /*鼠标移上滚动条样式*/
}
</style>
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）