Vue 3 Scroll Shadow

Add UX-friendly shadow to your scrollable list

Installation

``bash
npm i vue3-scroll-shadow
`

Usage

`javascript
import VueScrollShadow from 'vue3-scroll-shadow'
`

`html

`

Props

| Name | Type | Default | Description |
| --------------- | ------ | ------------- | ---------------------------------------------------------------------------------------------------------------------- |
| height | String | '100%' | Height of container |
| throttleWait | Number | 100 | Handle scroll event at most once per throttleWait milliseconds |
| shadowColorFrom | String | '#00000014' | Start color of scroll shadow. Can be RGB or RGBA:
- #000
- #000000
- #0004
- #00000044 |
| shadowColorTo | String | 'transparent' | End color of scroll shadow. Same as above |
| shadowSize | String | '15px' | Size of shadow |

Slot Attributes

| Name | Value | Description |
| ----------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
| scrollState | {
isOffTop: Boolean ,
isOffBottom: Boolean
} | When the list is scrollable, isOffTop is true when not at the top, isOffBottom is true when not at the bottom |

$3

`html

// you can use scrollState.isOffTop or scrollState.isOffBottom here

``