Vuetifyのv-dialog内でスクロール位置を取得する
ダイアログを使用したとき、window.scrollYではダイアログ内のスクロール位置が取得できない
v-dialogを使う場合以下の方法で取得可能
v-dialogにscrollableを指定
子要素に<v-card>、さらにその子要素に<v-card-text>を指定する
<v-card-text>にid属性を指定し、v-scroll:#<idで指定した文字列>="handleScroll"を指定する
また、<v-card-text>のheightとovarflow-y: hiddenを指定する
参考
おまけ(高さ関連のプロパティ)
e.target.scrollTop: 画面上部からどれだけスクロールしたかの値(px)
scrollHeight: スクロール可能領域の高さ
e.target.clientHeight: デバイスの縦の長さ
だいたいこんな感じ
code: sample.vue
<template>
<v-dialog
v-model="dialog"
scrollable>
<v-card>
<v-card-text
class="scroll-area"
id="scroll-target"
v-scroll:#scroll-target="handleScroll">
<!-- ここにダイアログに表示するマークアップを追加 -->
</v-card-text>
</v-card>
</v-dialog>
</template>
<script>
export default {
data() {
return {
dialog: false,
},
},
methods: {
handleScroll(e) {
console.log(e.target.scrollTop);
}
},
};
</script>
<style>
.scroll-area {
height: auto;
overflow-y: hidden;
}
</style>