<template>
<div class="scrollBox"
     ref="scrollView"
     @scroll="handleScroll"
     id="scroll-view">
      <slot></slot>
</div>
</template>

<script>
export default {
  name: "scrollBox",
  methods: {
    handleScroll(e) {
      const {scrollTop, clientHeight, scrollHeight} = e.target
      if (scrollTop + clientHeight > scrollHeight){
        this.$emit('touchBottom')
      }
    }
  }
}
</script>

<style scoped>

</style>