Overview

v-scroll-indicator is a Vue component that wraps content inside a scrollable area that displays indicators when additional content is available outside the client view.

Demo

View demo on Codepen

Install

Node

npm install -S 'v-scroll-indicator'

Browser

  <script src="../src/v-scroll-indicator.js"></script> 
  <script>
    Vue.use(VScrollIndicator)  
  </script> 

Usage

Add your content inside the v-scroll-indicator component. The v-scroll-indicator must have a height set. The height can be set either explicitly, relative to its parent, or by its parent.

If the contents do not need scroll bars, no indicators are rendered or displayed.

<v-scroll-indicator height='2in'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</v-scroll-indicator>

Properties

height

The height of the component, including the indicators if they are rendered.

up

The character or text to display for the up indicator.

down

The character or text to display for the down indicator.

Styling

The indicator content and styling can be replaced using CSS.

Additional Documentation

https://www.twelvetone.tv/docs/developer-tools/vue-plugins/v-scroll-indicator

TODO

• Add component style directives