forked from kaverti/website
64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<template>
|
|
<div class='scroll_load'>
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import throttle from 'lodash.throttle'
|
|
|
|
export default {
|
|
name: 'ScrollLoad',
|
|
props: ['loading', 'query-selector', 'padding-bottom', 'padding-top'],
|
|
computed: {
|
|
element () {
|
|
if(this.querySelector){
|
|
return document.querySelector(this.querySelector);
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onScroll: throttle(function () {
|
|
let paddingBottom = this.paddingBottom || 300;
|
|
let paddingTop = this.paddingTop || 150;
|
|
|
|
let scrollBottom, scrollTop;
|
|
|
|
//If already loading then do not fire
|
|
if(this.loading) return;
|
|
|
|
if(this.element) {
|
|
scrollBottom = Math.floor(
|
|
this.element.scrollTop +
|
|
this.element.getBoundingClientRect().height +
|
|
paddingBottom -
|
|
this.element.scrollHeight
|
|
);
|
|
|
|
scrollTop = paddingTop - this.element.scrollTop;
|
|
} else {
|
|
scrollBottom =
|
|
window.innerHeight + window.pageYOffset +
|
|
paddingBottom -
|
|
document.body.scrollHeight;
|
|
|
|
scrollTop = paddingTop - document.body.scrollTop;
|
|
}
|
|
|
|
if(scrollBottom > 0) {
|
|
this.$emit('loadNext');
|
|
} else if(scrollTop > 0) {
|
|
this.$emit('loadPrevious');
|
|
}
|
|
})
|
|
},
|
|
mounted () {
|
|
(this.element || window).addEventListener('scroll', this.onScroll);
|
|
},
|
|
destroyed () {
|
|
(this.element || window).removeEventListener('scroll', this.onScroll);
|
|
}
|
|
}
|
|
</script> |