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
-
{{ item.value }}
<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.
534 Dec 2, 2022
57 Mar 2, 2022
2 Feb 13, 2022
119 Nov 28, 2022
182 Nov 24, 2022
30 Jul 10, 2022
24 Nov 28, 2022
235 Dec 26, 2022
10 Jan 5, 2022
16 Nov 12, 2021
24 Sep 9, 2022
0 May 10, 2022
1.5k Jan 6, 2023
0 May 12, 2021
0 Nov 27, 2020
0 Jan 18, 2021