自定义滚动条样式
注意：此滚动条样式不兼容IE
先来看下最后展示效果吧
具体代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义滚动条样式</title> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <style> .content{height: 500px;width:300px;overflow: auto;margin: 0 auto;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ .content::-webkit-scrollbar { width: 3px;} /*定义滚动条轨道 内阴影+圆角*/ .content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); -webkit-border-radius: 3px; border-radius: 3px; } /*定义滑块 内阴影+圆角*/ .content::-webkit-scrollbar-thumb { -webkit-border-radius: 3px; border-radius: 3px; background: rgba(128,128,128,0.3); -webkit-box-shadow: inset 0 0 6px rgba(128,128,128,0.3); } .content::-webkit-scrollbar-thumb:window-inactive { background: rgba(128,128,128,0.5); } </style> </head> <body> <div class="content"> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p> </div> </body> </html>
