Skip to content

Instantly share code, notes, and snippets.

@mikemcbride
Last active August 6, 2019 20:42
Show Gist options
  • Save mikemcbride/5f72089902a45182af7e648f9d60bddd to your computer and use it in GitHub Desktop.
Save mikemcbride/5f72089902a45182af7e648f9d60bddd to your computer and use it in GitHub Desktop.
Scroll Progress indicator in Vue
<template lang="html">
<div :style="progress"></div>
</template>
<script>
export default {
name: 'ScrollProgress',
data() {
return {
scrollY: 0,
clientHeight: 1,
innerHeight: 0
}
},
computed: {
offset() {
return this.clientHeight - this.innerHeight
},
calculatedWidth() {
return (this.scrollY / this.offset) * 100
},
progress() {
return `width: ${this.calculatedWidth}%`
}
},
mounted() {
this.handleScroll()
window.addEventListener('scroll', this.handleScroll)
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
this.innerHeight = window.innerHeight
this.clientHeight = document.body.clientHeight
this.scrollY = window.scrollY
}
},
}
</script>
<style lang="css" scoped>
div {
position: fixed;
top: 0;
left: 0;
height: 0.125rem;
background-color: #0071e4;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment