vue-scroll-check
A simple component based on Vue.js. Detects if an element has scrolled to bottom, top or middle in itself.
Demo
Live Demo | Codesandbox
Install
npm i vue-scroll-check
Props
Props |
Description |
Type |
Default |
scrollAreaClass |
Classes of the component's scrollable child element. |
String |
|
:threshold |
Threshold value of event change. |
Number |
0 |
Events
Events |
onBottomReach |
onBottomLeave |
onTopReach |
onTopLeave |
onMiddleEnter |
onMiddleLeave |
Usage
<v-scroll-check
scrollAreaClass="list"
:threshold="100"
@onBottomReach="onBottomReach"
@onBottomLeave="onBottomLeave"
@onTopReach="onTopReach"
@onTopLeave="onTopLeave"
@onMiddleEnter="onMiddleEnter"
@onMiddleLeave="onMiddleLeave"
>
<div class="item" v-for="i in 50" :key="i">Item {{ i }}</div>
</v-scroll-check>
<script>
import VScrollCheck from 'vue-scroll-check'
export default {
components: {
VScrollCheck
},
methods: {
onBottomReach() {
console.log('onBottomReach')
},
onBottomLeave() {
console.log('onBottomLeave')
},
onTopReach() {
console.log('onTopReach')
},
onTopLeave() {
console.log('onTopLeave')
},
onMiddleEnter() {
console.log('onMiddleEnter')
},
onMiddleLeave() {
console.log('onMiddleLeave')
}
}
}
</script>
<style>
.list {
height: 500px;
overflow: auto;
}
</style>