隱藏滾動條css3實現滾動同時隱藏滾動條
阿新 • • 發佈：2018-12-14
專案場景需求要在區域性實現滾動，但是滾動出現了滾動條，一瞬間感覺整個頁面都不好了，經過努力css成功實現滾動同時隱藏滾動條，廢話不多說，直接上程式碼
核心程式碼：
::-webkit-scrollbar{
display:none;
}使用方法：設定滾動後在容器上新增該css樣式；
ul::-webkit-scrollbar{
display:none;
}案例：
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>隱藏滾動條</title> <style> ul{ margin: 50px auto; padding: 0; width:300px; height:400px; border:solid #000 2px; list-style: none; } li{ line-height:48px; background: yellowgreen; } ul{ overflow-x: hidden; overflow-y: scroll; } ul::-webkit-scrollbar{ display:none; } </style> </head> <body> <ul> <li>測試隱藏滾動條</li> <li>測試隱藏滾動條</li> <li>測試隱藏滾動條</li> <li>測試隱藏滾動條</li> <li>測試隱藏滾動條</li> <li>測試隱藏滾動條</li> <li>測試隱藏滾動條</li> <li>測試隱藏滾動條</li> <li>測試隱藏滾動條</li> <li>測試隱藏滾動條</li> <li>測試隱藏滾動條</li> <li>測試隱藏滾動條</li> </ul> </body> </html>
效果：
