V-scroll-indicator NPM

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>