Vue3 + Quasar の q-scroll-area でscroll bottom とか使いこなす

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

1. horizontalContainerSize: 380
2. horizontalPercentage: 0
3. horizontalPosition: 0
4. horizontalSize: 380
5. verticalContainerSize: 240
6. verticalPercentage: 1
7. verticalPosition: 651
8. verticalSize: 891

2

<div class=”q-scrollarea__”>….</div>

3

1. left: 0
2. 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 の簡単な使い方纏めでした。