Detect scrolling to the bottom of a div in Vue.js

DetectScroll.vue

<template>
  <div class="wrapper">
    <div class="box" @scroll="handleScroll">
      <p>Your content here...</p>
    </div>
    <a href="#" v-if="hasScrolledToBottom">Show After Scrolling</a>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        hasScrolledToBottom: false
      }
    },
    methods: {
      handleScroll: function(el) {
        if((el.srcElement.offsetHeight + el.srcElement.scrollTop) >= el.srcElement.scrollHeight) {
          this.hasScrolledToBottom = true;
        }
      }
    }
  }
</script>

Please, don't use srcElement -- it's deprecated. Use target instead.

fuck

Thanks!

Please, don't use srcElement -- it's deprecated. Use target instead.

Nice catch!

Please use Math.ceil() like below.
if(Math.ceil(el.srcElement.offsetHeight + el.srcElement.scrollTop)) >= el.srcElement.scrollHeight){..}

It is not working, who knows when scroll bottom fetching data