useScrollShadow 사용법

스크롤 가능한 요소에 스크롤 그림자 효과를 적용하기 위한 컴포지션.

Usage

자동으로 가져온 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를 사용하여 요소를 오버레이하지 않고 가장자리에서 내용을 페이드하므로 모든 배경에서 작동합니다.
자동으로 요소가 오버플로되었는지 감지하고 필요할 때만 그림자를 적용합니다.
수직 및 수평 방향을 모두 지원합니다.Supports both vertical and horizontal orientions.

API

useScrollShadow(element, options?)

매개 변수

element

MaybeRef<HTMLElement | null | undefined> required

스크롤 가능한 요소에 대한 템플릿 참조 또는 반응 참조입니다.

options

UseScrollShadowOptions

스크롤 그림자의 구성 옵션입니다.

return (### return) (0)

style

ComputedRef<CSSProperties | undefined>

:style를 사용하여 스크롤 가능한 요소에 바인딩할 반응형 스타일 오브젝트입니다. 그림자가 활성화된 경우 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.