quasar の q-scroll-areaは長さが動的なコンテンツを収めるためにとても便利なのですが、いまひとつその自由な扱いが分からなかったので、そのあたりまとめてみました。
q-scroll-area の情報を自由に取得する
ざっくり書くとこんな感じです。
<template>
<q-scroll-area
ref="scrollRef"
@scroll="scrollCheck"
>
</template>
<script>
import { ref } from 'vue'
export default {
const scrollRef = ref()
const scrollCheck = () => {
// 1 scroll area の情報
console.log( scrollRef.value.getScroll() )
// 2 scroll area の DOM要素(HTMLタグ)
console.log( scrollRef.value.getScrollTarget() )
// 3 scroll の状態
console.log( scrollRef.value.getScrollPosition() )
}
return { scrollRef, scrollCheck }
}
</script>
こんな感じで一通りの情報が取得できます。
1
- horizontalContainerSize: 380
- horizontalPercentage: 0
- horizontalPosition: 0
- horizontalSize: 380
- verticalContainerSize: 240
- verticalPercentage: 1
- verticalPosition: 651
- verticalSize: 891
2
<div class=”q-scrollarea__”>….</div>
3
- left: 0
- top: 651
スクロール位置を自在に設定する
これで情報が取れたので、今度は設定する方法です。
const scrollBottom = () => {
const scroll = scrollRef.value.getScroll()
const scrollToBottom = scroll.verticalSize - scroll.verticalContainerSize
scrollRef.value.setScrollPosition( 'vertical', scrollToBottom )
}
これで縦位置の一番下までスクロールできます。
横位置のスクロールの場合は vertical ではなく horizontal を使用します。
ということで、 q-scroll-area の簡単な使い方纏めでした。
コメント