useScrollShadow

Um composable para aplicar efeitos de sombra de rolagem em qualquer elemento rolável.

Uso

Use o composable useScrollShadow, importado automaticamente, para aplicar sombras de esmaecimento nas bordas de um elemento rolável, indicando que há mais conteúdo disponível na direção da rolagem.

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.

Uses CSS mask-image to fade content at the edges rather than overlay elements, so it works on any background.
Automatically detects whether the element is overflowing and only applies shadows when needed.
Supports both vertical and horizontal orientations.

API

useScrollShadow(element, options?)

Parâmetros

element

MaybeRef<HTMLElement | null | undefined> required

A template ref or reactive reference to the scrollable element.

options

UseScrollShadowOptions

Configuration options for the scroll shadow.

Retorno

style

ComputedRef<CSSProperties | undefined>

A reactive style object to bind on the scrollable element with :style. Contains maskImage when shadows are active, undefined otherwise.

isOverflowing

ComputedRef<boolean>

Whether the element's content overflows its visible area.

arrivedState

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

Reactive scroll arrival state from useScroll.

Exemplos

Horizontal

Use a opção orientation para containers roláveis na horizontal:

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

Tamanho personalizado

Use a opção size para alterar o tamanho da sombra em pixels:

<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

Um composable para controlar overlays programaticamente.

useToast

Um composable para exibir notificações toast no seu app.