こんにちは、ワタナベです。
今回は、iOSでスクロールバーを常に表示させる方法の備忘録です。
iOSではスクロールしているときにしかバーが表示されません。
そして、今現在CSSで解決することもできません。
どうやらiOS13以降からこのような仕様のようです。
常に表示させておきたい場合には、スクロールをカスタマイズするライブラリを使用します。
SimpleBar
使い方
まずCDNを読み込みます。
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.css”/>
<script type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.js”></script>
DLして使う場合は↓の公式サイトから。
「data-simplebar」属性を追加
スクロールを表示させたい要素に「data-simplebar」属性を追加します。
「overflow:auto;」を指定
スクロールを表示させたい要素にCSSで「overflow: auto;」や「overflow-x: scroll」等を指定。
常時表示のオプション属性を追加
常時表示をさせるオプション属性の「data-simplebar-auto-hide=”false”」を追加します。
<div class=”scrollbar” data-simplebar data-simplebar-auto-hide=”false”>テキストテキストテキストテキスト</div>
↑このようになっていればOK！
これでiOSでも表示されているはずです。
CSSでスタイルをカスタマイズすることもできます。
それではまた次回。
ご閲覧ありがとうございました(^^♪
