Vue中如何让@scroll事件仅在元素垂直滚动到底部时触发

核心思路 #

通过记录上一次的垂直滚动偏移量scrollTop，仅当本次滚动的垂直偏移量发生变化时，才执行触底加载判断，过滤水平滚动触发的无效事件。

实现步骤 #

1. 在Vue实例中新增状态存储上一次的垂直滚动位置：

   // Vue2 选项式API
   data() {
     return {
       // 其他现有状态...
       lastScrollTop: 0
     }
   }
   

   如果你使用Vue3组合式API：

   import { ref } from 'vue'
   const lastScrollTop = ref(0)
   

2. 修改loadMoreData方法，增加垂直滚动变化的校验逻辑：

   // Vue2 选项式API写法
   loadMoreData({ target: { scrollTop, clientHeight, scrollHeight }}) {
       // 垂直滚动位置未变化说明是水平滚动，直接跳过逻辑
       if (scrollTop === this.lastScrollTop) return
       // 更新垂直滚动位置记录
       this.lastScrollTop = scrollTop
       // 原有触底判断逻辑不变
       if (scrollTop + clientHeight >= scrollHeight) {
           // load more data here...
       }
   },
   

   Vue3组合式API对应写法：

   const loadMoreData = ({ target: { scrollTop, clientHeight, scrollHeight }}) => {
       if (scrollTop === lastScrollTop.value) return
       lastScrollTop.value = scrollTop
       if (scrollTop + clientHeight >= scrollHeight) {
           // 加载更多逻辑
       }
   }
   

可选优化 #

如果需要仅在向下滚动触底时触发加载，避免向上滚动到顶后回落触底的误触发，可以额外增加滚动方向判断：

loadMoreData({ target: { scrollTop, clientHeight, scrollHeight }}) {
    if (scrollTop === this.lastScrollTop) return
    // 仅向下滚动时才判断触底
    const isScrollDown = scrollTop > this.lastScrollTop
    this.lastScrollTop = scrollTop
    if (isScrollDown && scrollTop + clientHeight >= scrollHeight) {
        // load more data here...
    }
},

原理说明 #

元素的scroll事件不区分滚动轴，只要水平/垂直滚动位置发生变化就会触发。原有代码没有过滤水平滚动场景，只要当前垂直位置已经符合触底条件，水平滚动时就会重复执行加载逻辑。新增lastScrollTop的对比逻辑后，水平滚动时scrollTop不会发生变化，会直接提前返回，不会触发后续加载逻辑。

内容的提问来源于stack exchange，提问作者user3233787