Vue 3 Scroll Shadow

Add UX-friendly shadow to your scrollable list

Installation

npm i vue3-scroll-shadow

Usage

import VueScrollShadow from 'vue3-scroll-shadow'

<template>
  <vue-scroll-shadow>
    <!-- Your content goes here -->
  </vue-scroll-shadow>
</template>

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 |

Example

<vue-scroll-shadow v-slot="{ scrollState }">
  // you can use scrollState.isOffTop or scrollState.isOffBottom here
</vue-scroll-shadow>