<v-scroll-check
  containerClass="my-container"
  scrollAreaClass="list"
  :threshold="100"
  @onBottomReach="onBottomReach"
  @onBottomLeave="onBottomLeave"
  @onTopReach="onTopReach"
  @onTopLeave="onTopLeave"
  @onMiddleEnter="onMiddleEnter"
  @onMiddleLeave="onMiddleLeave"
>
  <div class="item" v-for="i in 50" :key="i">Item {{ i }}</div>
</v-scroll-check>

<script>
import VScrollCheck from 'vue-scroll-check'

export default {
  name: 'App',
  components: {
    VScrollCheck
  },
  methods: {
    onBottomReach() {
      console.log('onBottomReach')
    },
    onBottomLeave() {
      console.log('onBottomLeave')
    },
    onTopReach() {
      console.log('onTopReach')
    },
    onTopLeave() {
      console.log('onTopLeave')
    },
    onMiddleEnter() {
      console.log('onMiddleEnter')
    },
    onMiddleLeave() {
      console.log('onMiddleLeave')
    }
  }
}
</script>

<style>
.list {
  width: 300px;
  box-shadow: 0 10px 20px rgba(#404040, 0.15);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  /* Don't forget that! The scrollAreaClass must be scrollable. */
  height: 500px;
  overflow: auto;
}

.item {
  padding: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
  Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>