Vue Scroll Detect

Detect component visibility change on scrolling.

Installation

 yarn add vue-scroll-detect

Example

See examples/ at Code Sandbox

Usage

ES Import

 import { Scrollable, ScrollContainer } from 'vue-scroll-detect'

UMD build

 <script src="vue-scroll-detect.umd.min.js"></script>
<script>
const { ScrollContainer, Scrollable } = VueScrollDetect
...
</script>

visible and invisible events are emitted when element visibility changes in a scrollable container, either an element or window.

To watch for element visibility, put it inside Scrollable, which in turns must be nested inside a ScrollContainer. See src/examples for more.

Example

<ScrollContainer :initial-event="true">
  <ul>
    <li
      v-for="(item, index) in items"
      ref="items"
      :key="item.key"
    >
      <Scrollable
        @visible="onVisible(item, index, $event)"
        @invisible="onInvisible(item, index, $event)"
      >
        <span class="item">{{ item.value }}</span>
      </Scrollable>
    </li>
  </ul>
</ScrollContainer>

Props

ScrollContainer

Name	Type	Description
root	Boolean	To watch visibility of elements as they enter/exit the window viewport. By default this is false, so the container itself must be scrollable eg: overflow: scroll.
initial-event	Boolean	Whether to receive initial visibility of Scrollable elements on component mount.
enter-offset	String	CSS length value (eg: "1em"). If the value is positive, emit visible event before element enters the container/viewport by the distance. Otherwise, emit afterwards.
exit-offset	String	CSS length value (eg: "1em"). If the value is positive, emit invisible event before element exits the container/viewport by the distance. Otherwise, emit afterwards.

License

Vue Scroll Detect is released under the MIT License.