useScrollShadow

スクロール可能な要素にスクロールシャドウ効果を適用するコンポーザー。

使用法

自動インポートされたuseScrollShadowコンポーザーを使用して、スクロール可能な要素のエッジにフェードシャドウを適用し、スクロール方向により多くのコンテンツが利用可能であることを示します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.

<script setup lang="ts">
const el = useTemplateRef('el')

const { style } = useScrollShadow(el)
</script>

<template>
  <div class="max-w-sm bg-elevated/50 rounded-lg">
    <div
      ref="el"
      :style="style"
      class="h-72 p-4 space-y-4 overflow-y-auto"
    >
      <p v-for="i in 6" :key="i">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const el = useTemplateRef('el')

const { style } = useScrollShadow(el)
</script>

<template>
  <div class="max-w-sm bg-elevated/50 rounded-lg">
    <div
      ref="el"
      :style="style"
      class="h-72 p-4 space-y-4 overflow-y-auto"
    >
      <p v-for="i in 6" :key="i">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.
      </p>
    </div>
  </div>
</template>

CSS mask-imageを使用して、要素をオーバーレイするのではなくエッジでコンテンツをフェードします。
要素のオーバーフローを自動的に検出し、必要なときにのみシャドウを適用する。
垂直方向と水平方向の両方に対応。

API

useScrollShadow(element, options?)

パラメータ

element

MaybeRef<HTMLElement | null | undefined> required

テンプレートrefまたはスクロール可能な要素へのリアクティブ参照。

options

UseScrollShadowOptions

スクロールシャドウの設定オプション。

戻る

style

ComputedRef<CSSProperties | undefined>

スクロール可能な要素を:styleでバインドするためのリアクティブなスタイルオブジェクトです。shadowsがアクティブな場合はmaskImage、それ以外の場合はundefinedを含みます。

isOverflowing

ComputedRef<boolean>

要素のコンテンツが表示領域をオーバーフローするかどうか。

arrivedState

{ top: boolean, bottom: boolean, left: boolean, right: boolean }

useScrollからのリアクティブスクロール到着状態。

例

水平

水平方向にスクロール可能なコンテナにはorientationオプションを使用します。

<script setup lang="ts">
const el = useTemplateRef('el')

const { style } = useScrollShadow(el, { orientation: 'horizontal' })
</script>

<template>
  <div ref="el" class="overflow-x-auto whitespace-nowrap" :style="style">
    <!-- Horizontally scrollable content -->
  </div>
</template>

カスタムサイズ

sizeオプションを使用して、シャドウサイズをピクセル単位で変更します。

<script setup lang="ts">
const el = useTemplateRef('el')

const { style } = useScrollShadow(el, { size: 48 })
</script>

<template>
  <div ref="el" class="max-h-[300px] overflow-y-auto" :style="style">
    <!-- Scrollable content -->
  </div>
</template>

useOverlay

A composable to programmatically control overlays.

useToast

A composable to display toast notifications in your app.