頁面滾動條優化
阿新 • • 發佈：2020-10-14
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .inner{ width: 265px; height: 400px; position: absolute; top: 33px; left: 13px; overflow:hidden; } .innerbox{ overflow-x: hidden; overflow-y: auto; color: #000; font-size: .7rem; font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑體",Arial,Tahoma; height: 100%; } /*滾動條樣式*/ .innerbox::-webkit-scrollbar { width: 4px; /*height: 4px;*/ } /* 滾動條 */ .innerbox::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); } /* 滾動條背景 */ .innerbox::-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> <body> <div class="inner"> <div class="innerbox"> <p style="height:200px;">這是內容111</p> <p style="height:400px;">這裡是內容222</p> <p style="height:1000px;">這裡是內容333</p> </div> </div> </body> </html>