スクロールバーのデザインを全ブラウザで統一したいケースがあります。
Chromeなどはcssで簡単にカスタマイズできますがiOSやIEも含めて同じデザインにするとなるとかなり大変です。
で、本日色々調べた結果下記でできました。
信じられないぐらい簡単で、iPadもFirefoxも全部同じデザインにできます。
http://grsmto.github.io/simplebar/
注意点としてはGitHubにあるzipです。展開した中のjsはうまく使えませんでした。
とりあえず何も考えずにREADME.mdにある下記の記述をそのままコピペするのが一番簡単です。
1 2 3 4 5 |
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script> <!-- or --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"> <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script> |
デザインをデフォルトから変える場合はこのcssをダウンロードして書き換えればOK。