首页 > 代码库 > 改变滚动条的样式
改变滚动条的样式
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>改变滚动条默认样式</title> <style> *{ margin: 0; padding: 0; } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar{ width: 3px; /*滚动条宽度*/ height: 3px; /*滚动条高度*/ } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; /*滚动条的背景区域的圆角*/ /*background-color: red;*//*滚动条的背景颜色*/ background-color: white;/*滚动条的背景颜色*/ } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb{ border-radius: 10px; /*滚动条的圆角*/ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: green; /*滚动条的背景颜色*/ } </style></head><body> <div style="width: 100%;height: 1200px;background: beige"></div></body></html>
效果图：
改变滚动条的样式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。