Add UX-friendly shadow to your scrollable list
npm i vue3-scroll-shadow
import VueScrollShadow from 'vue3-scroll-shadow'
<template>
<vue-scroll-shadow>
<!-- Your content goes here -->
</vue-scroll-shadow>
</template>
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 |
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 |
<vue-scroll-shadow v-slot="{ scrollState }">
// you can use scrollState.isOffTop or scrollState.isOffBottom here
</vue-scroll-shadow>