Qiita Conference 2025

こにふぁー (@konifar)

提案のレベルを上げる - 推進力のあるエンジニアになるための思考法

特設サイトで詳細をチェック

1

More than 5 years have passed since last update.

Vuetify Dialog を背景固定でスクロールさせる方法（iOS Safari）

Posted at 2019-09-05

課題

VuetifyのDialog（モーダル）を開いたとき、背景を固定させた状態でDialog内のカードをスクロールさせたい。

環境

Nuxt: 2.9.2
@nuxtjs/vuetify: 1.6.3
body-scroll-lock: 2.6.4

参考資料

【iOS対応】Vue.jsで背景固定のモーダルを作る
こちらの「Body Scroll Lockの使い方」を参考に考えました。

解決方法

VuetifyのDialogコンポーネント内の<v-card>にovarflow-y: hiddenを追加するのがポイント。具体的なコードはvuetifyのgithubにコメントを投稿してあります。

[Bug Report] IOS: when long dialog scroll, background should not scroll issue #3875

1

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Qiita Conference 2025 will be held!: 4/23(wed) - 4/25(Fri)

Qiita Conference is the largest tech conference in Qiita!

Keynote Speaker

ymrl、Masanobu Naruse, Takeshi Kano, Junichi Ito, uhyo, Hiroshi Tokumaru, MinoDriven, Minorun, Hiroyuki Sakuraba, tenntenn, drken, konifar

View event details

1