In-Viewport component based on Vuetify v-scroll

app.js

<template>
<in-viewport v-model="visible"></in-viewport>  
</template>

<script>
  export default{
   data(){
      return{
         visible:false
      }
   }
   watch:{
    visible(v){
     // do something on v change
      console.log(v)
    }
   }
  }
</script>

InViewport.js

import throttle from 'lodash.throttle'

export default {
  name: 'in-viewport',
  props: {
    value: Boolean,
    offset: {
      type: Number,
      default: 124 // might depends on the toolbar fixed...
    }
  },
  render (h) {
    return h('div', {
      directives: [{
        name: 'scroll',
        value: {
          callback: this.onScroll
        }
      }]
    })
  },
  methods: {
    onScroll: throttle(function () {
      this.$emit('input', this.elementInViewport(this.$el))
    }, 150),
    elementInViewport (el) {
      // https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
      let top = el.offsetTop + this.offset
      let height = el.offsetHeight
      while (el.offsetParent) {
        el = el.offsetParent
        top += el.offsetTop
      }
      return (
        top < (window.pageYOffset + window.innerHeight) && (top + height) > window.pageYOffset
      )
    }
  }
}