关于使用Vue判断页面是否滚动到底部的事件监听

Posted 2021-09-10 吃螃蟹的小孩

关于使用Vue判断页面是否滚动到底部的事件监听

• DOM三个属性
• • scrollTop
  • clientHeight
  • scrollHeight
• 滚动到底部的判断
• Vue写法
• 效果

DOM三个属性

scrollTop

元素顶部到元素可视区域顶部的像素距离（可读写）。

clientHeight

元素的像素高度，包括盒子内容content和内边距padding, 不包括边框外边距和水平滚动条（只读）。

scrollHeight

类似于clientHeight，但包括由于overflow属性不可见内容的高度。

滚动到底部的判断

element.scrollHeight-element.scrollTop=element.clientHeight

Vue写法

只需监听scroll事件获取到scrollTop, clientHeight 和 scrollHeight的值再进行判断，就能知道元素是否滚动到底部。

<template>
  <div id="app">
    <div class="scroll-view"
         ref="scrollView"
         id="scroll-view"
         @scroll="handleScroll">
      <div
          v-for="(item, index) in list"
          :key="index"
          class="list-item">
        列表项{{item}}
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'HelloWorld',
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    };
  },
  mounted() {
    this.$nextTick(() => {
      console.log('clientHeight', this.$refs.scrollView.clientHeight)
    })
  },
  methods: {
    handleScroll(e) {
      const {scrollTop, clientHeight, scrollHeight} = e.target
      // console.log(scrollTop, clientHeight, scrollHeight)
      if (scrollTop + clientHeight === scrollHeight){
        alert('滚动到底部啦')
      }
    }
  }
}
</script>
<style scoped>
.scroll-view {
  width: 400px;
  height: 300px;
  overflow-y: scroll;
  background-color: #68b687;
}

.list-item {
  padding: 40px 0;
}

.list-item:nth-child(2n + 1){
  background-color: rgba(0, 0, 0, .2);
}

.list-item:nth-child(2n + 2){
  background-color: rgba(222, 221, 221, 0.2);
}
</style>

效果