概要
Vuetify でスクロールのある大きめなダイアログを v-dialog で実装している場合。
- ダイアログを開いてスクロールする
- ダイアログを閉じる
- またダイアログを開く
とすると、2回目のダイアログのスクロールがTopに戻っておらず、1回目に開いたときのスクロール位置を保持したままになってしまいます。
※ Vuetify は v1.5 の場合です
解決方法
issueにあった解決策を参考に実装を行いました。ダイアログが Active になると v-dialog--active
class がついた div タグができるので、それの scrollTop を 0 にするとスクロール位置が元に戻りました。ダイアログが Active になったタイミングで scrollTop = 0 をする必要があるので、 updated() を利用しました。
<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 が失敗したときの処理を書かないと、コンソールでエラーが表示されるので注意です。