🍉
Vuetifyの縦スクロールバーについて
事象
一覧画面を作っていたんですが、現場（iPadからの利用）から縦スクロールできなくて困っていた。調べてみたら、こういう事象です。
- iPadの横表示の場合、一覧画面にテーブル部品のスクロールバーが表示されます。
- ページ全体にも縦スクロールバーが表示されます。
- 画面の内容がいっぱいにならなくでも、縦スクロールバーが表示されます。
- タッチする場所とタイミングによってスクロールできない場合が確かにあります。
結論
何が原因だろうといろいろ調べて、結論を記録します。
Vuetifyのデフォルト表示の仕様です。
具体的に、自動的にhtmlタグにoverflow-y=scrollを追加するようにしている。
そして、この仕様を変更する予定がありません。
対処
Stackoverflowを参考しました：
自分の場合、非表示にしたいので、hiddenにします。
<style>
html {
overflow: hidden !important;
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar {
width: 0;
height: 0;
}
</style>
ポイント：
- importantが必須
- styleタグにscopedから削除
コメント
- デフォルト仕様とは思いませんでした。
- 最初はchatgptで試してみたんだけど、ダメでした。
Discussion