v-dialogの再び開いたダイアログのスクロール位置を初期値に戻す

概要

Vuetify でスクロールのある大きめなダイアログを v-dialog で実装している場合。

1. ダイアログを開いてスクロールする
2. ダイアログを閉じる
3. またダイアログを開く

とすると、2回目のダイアログのスクロールがTopに戻っておらず、1回目に開いたときのスクロール位置を保持したままになってしまいます。

※ Vuetify は v1.5 の場合です

解決方法

issueにあった解決策を参考に実装を行いました。ダイアログが Active になると v-dialog--active class がついた div タグができるので、それの scrollTop を 0 にするとスクロール位置が元に戻りました。ダイアログが Active になったタイミングで scrollTop = 0 をする必要があるので、 updated() を利用しました。

• Dialog scroll position does not reset on subsequent shows #1687

<template>
  <div>
    <v-dialog v-model="dialog">
      <!-- 省略 -->
    </v-dialog>
  </div>
</template>

<script lang="ts">
@Component
export default class MyDialog extends Vue {
  updated() {
    const elements = document.getElementsByClassName('v-dialog--active');
    if (!elements || !elements.length) {
      // 要素が取得できなかった場合は終了
      return;
    }
    elements[0].scrollTop = 0;
  }
}
</script>

getElementsByClassName が失敗したときの処理を書かないと、コンソールでエラーが表示されるので注意です。