瀏覽器隱藏滾動條並滾動
阿新 • • 發佈：2021-08-19
在專案開發工程中，經常會遇到瀏覽器的滾動條佔用頁面寬度的問題，這就很煩，以下是一套相容性比較好的處理方式。不僅隱藏了滾動條，頁面還能繼續滾動。
示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; overflow:hidden; } .container { width: calc(100vw + 17px); height: 100vh; display: flex; flex-wrap: wrap; overflow-y: scroll; } .container div { width: calc(100vw / 8); height: 200px; line-height: 200px; text-align: center; border: #7FFFD4 1px solid; } </style> </head> <body> <div class="container"> <!-- 裡面放50個div，為了演示，簡而為之 --> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>