Make Scrolling Obvious: A Vue 3 Scrollable Indicator Component

Install & Download:

# NPM
$ npm install vue-scrollable-container

Scrollable-container is a Vue 3 component that makes it easy to indicate scrollable content blocks.

When a content block is scrollable, the component makes this clear by displaying a scrollable indicator right in the center of the content.

Plus, it adds a subtle gradient fade effect to the edges, gently hinting that there’s more to explore.

1. Install and import the ‘ScrollableContainer’ component.

<script setup lang="ts">
  import { ScrollableContainer } from 'vue-scrollable-container';
</script>

2. Add your scrollable content to the ‘ScrollableContainer’ component.

<template>
  <scrollable-container>
    Your Content Here
  </scrollable-container>
</template>

3. Available component props.

size: 100,
theme: 'light',
label: 'scrollable',
isVertical: false,
shadowFromX: '0',
shadowToX: '0',