useScrollShadow Soon

A composable to apply scroll shadow effects on any scrollable element.

Usage

Use the auto-imported useScrollShadow composable to apply fade shadows on the edges of a scrollable element, indicating that more content is available in the scroll direction.

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

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

<template>
  <div ref="el" class="max-h-[200px] overflow-y-auto" :style="style">
    <!-- Scrollable content -->
  </div>
</template>
  • 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?)

Parameters

element
MaybeRef<HTMLElement | null | undefined> required
A template ref or reactive reference to the scrollable element.
options
UseScrollShadowOptions
Configuration options for the scroll shadow.

Return

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.

Examples

Horizontal

Use the orientation option for horizontally scrollable containers:

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

Use the size option to change the shadow size in 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

A composable to programmatically control overlays.

useToast

A composable to display toast notifications in your app.