# useScrollShadow

> A composable function to apply scroll shadow effects to 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.

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

A template ref or reactive reference to the scrollable element.

Configuration options for the scroll shadow.

The shadow size in pixels.

The scroll direction to apply shadows.

### Return

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

Whether the element's content overflows its visible area.

Reactive scroll arrival state from .

## Examples

### Horizontal

Use the `orientation` option for horizontally scrollable containers:

```vue
<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:

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