改变滚动条的样式
<!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>
效果图：
