Browse Source
Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/kick-starter-for-time-pwa/pulls/17world-fix
anomalist
2 years ago
2 changed files with 82 additions and 6 deletions
@ -0,0 +1,42 @@ |
|||
<template> |
|||
<div ref="scrollContainer"> |
|||
<slot /> |
|||
<div ref="sentinel" style="height: 1px"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Emit, Prop, Vue } from "vue-facing-decorator"; |
|||
|
|||
@Component |
|||
export default class InfiniteScroll extends Vue { |
|||
@Prop({ default: 100 }) |
|||
readonly distance!: number; |
|||
private observer!: IntersectionObserver; |
|||
|
|||
mounted() { |
|||
const options = { |
|||
root: this.$refs.scrollContainer as HTMLElement, |
|||
rootMargin: `0px 0px ${this.distance}px 0px`, |
|||
threshold: 1.0, |
|||
}; |
|||
this.observer = new IntersectionObserver(this.handleIntersection, options); |
|||
this.observer.observe(this.$refs.sentinel as HTMLElement); |
|||
} |
|||
|
|||
beforeUnmount() { |
|||
this.observer.disconnect(); |
|||
} |
|||
@Emit("reached-bottom") |
|||
handleIntersection(entries: IntersectionObserverEntry[]) { |
|||
const entry = entries[0]; |
|||
if (entry.isIntersecting) { |
|||
return true; |
|||
} |
|||
return false; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped></style> |
Loading…
Reference in new issue