添加滚动条并统一修改样式
一、添加滚动条 并 修改样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; /* 100vh 指的是100%但是没有子盒子也能撑起高度*/ height: 100vh; background-color: grey; /*超过最大的高度就在右侧出现滚轮*/ max-height: 400px; overflow-y: scroll; z-index: 999; }
/* =========================== */ /* 滚动条样式 wyz*/ ::-webkit-scrollbar { /*滚动条整体样式*/ width: 12px; /*高宽分别对应横竖滚动条的尺寸*/ height: 12px; } ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.1); } </style> </head> <body> <div></div> </body> </html>
二、具体的样式
