Skip to content

Instantly share code, notes, and snippets.

@asvae
Created July 20, 2016 18:29
Show Gist options
  • Save asvae/3bf55934163ac1444a9f885a8fcee3cf to your computer and use it in GitHub Desktop.
Save asvae/3bf55934163ac1444a9f885a8fcee3cf to your computer and use it in GitHub Desktop.
vue.js infinite scroll component WIP
<template>
<div>
<pre v-text="$data | json"></pre>
</div>
</template>
<script>
export default {
data (){
return {
coordinates: {
scrollTop: 0,
elementTop: 0,
visibleHeight: 0,
},
isAtBottom: false,
}
},
watch: {
isAtBottom(){
this.$emit('at-bottom')
console.log('at-bottom')
},
},
ready (){
let ready = function (){console.log('ready')}
this.$parent.$el.addEventListener("scroll", ready)
this.$parent.$el.onscroll = ready
this.updateCoordinates()
},
methods: {
updateCoordinates(){
this.coordinates = {
scrollTop: this.$el.scrollTop,
elementTop: this.$el.getBoundingClientRect().top,
visibleHeight: document.documentElement.clientHeight,
}
this.isAtBottom = this.coordinates.elementTop < this.coordinates.visibleHeight
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment