UseScrollShadow Bearbeiten

Ein Composable, um Scroll-Schatteneffekte auf jedes scrollbare Element anzuwenden.

Bearbeiten

Verwenden Sie das automatisch importierte useScrollShadow-Composable, um Fade-Schatten an den Rändern eines scrollbaren Elements anzuwenden, um anzuzeigen, dass mehr Inhalt in der Scrollrichtung verfügbar ist.

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>

Verwendet CSS mask-image, um Inhalte an den Rändern anstelle von Overlay-Elementen zu verblassen, sodass es auf jedem Hintergrund funktioniert.
Erkennt automatisch, ob das Element überläuft und wendet Schatten nur bei Bedarf an.
Unterstützt sowohl vertikale als auch horizontale Ausrichtungen.

API (Englisch)

useScrollShadow(element, options?) (nicht)

Parameters (englisch)

element

MaybeRef<HTMLElement | null | undefined> required

Eine Template-Referenz oder ein reaktiver Verweis auf das scrollbare Element.

options

UseScrollShadowOptions

Konfigurationsoptionen für den Scrollschatten.

Return zurück

style

ComputedRef<CSSProperties | undefined>

Ein reaktives Style-Objekt, das mit :style an das scrollbare Element gebunden werden soll. Enthält maskImage, wenn Schatten aktiv sind, ansonsten undefined.

isOverflowing

ComputedRef<boolean>

Ob der Inhalt des Elements den sichtbaren Bereich überläuft.

arrivedState

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

Reaktiver Scroll-Ankunftsstatus von useScroll.

Examples (Beispiele)

Horizontal

Verwenden Sie die orientation-Option für horizontal scrollbare Container:

<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>

Custom Größe

Verwenden Sie die Option size, um die Schattengröße in Pixeln zu ändern:

<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.