vue-scroll-detect
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.
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.3.0 | ^2.6.10 | MIT | |
| 0.2.0 | ^2.6.10 | MIT | |
| 0.1.2 | ^2.6.10 | MIT |