vue3实现元素监听滚动事件

// useScroll.js

import { debounce } from '@/common/util.js'

export default function useScroll(elRef) {
  console.log('########3useScroll', elRef.value)
  let el = window
  const isReachBottom = ref(false)
  const clientHeight = ref(0)
  const scrollTop = ref(0)
  const scrollHeight = ref(0)

  const scrollListenerHandler = debounce(() => {
    if (el === window) {
      clientHeight.value = document.documentElement.clientHeight || document.body.clientHeight
      scrollHeight.value = document.documentElement.scrollHeight || document.body.scrollHeight
      scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
    } else {
      clientHeight.value = el.clientHeight
      scrollTop.value = el.scrollTop
      scrollHeight.value = el.scrollHeight
    }
    if (clientHeight.value + scrollTop.value >= scrollHeight.value) {
      isReachBottom.value = true
    } else {
      isReachBottom.value = false
    }
    console.log('#########scrollTop', scrollTop.value)
    console.log('#########clientHeight', clientHeight.value)
    console.log('#########scrollHeight', scrollHeight.value)
    console.log('#########isReachBottom', isReachBottom.value)
  }, 100)
  onMounted(() => {
    if (elRef) {
      el = elRef.value
    }
    el.addEventListener('scroll', scrollListenerHandler)
  })
  onUnmounted(() => {
    el.removeEventListener('scroll', scrollListenerHandler)
  })

  return { isReachBottom, clientHeight, scrollTop, scrollHeight }
}

使用的时候，通过监听到达底部的变量改变，可以做想做的事情，比如加载更多，或跳转页面等。

import useScroll from '@/hooks/useScroll'

const { isReachBottom } = useScroll(dom)

watch(isReachBottom, () => {

      console.log('#########isReachBottom改变', isReachBottom)

 })

注意：对于滚动事件，最好要使用防抖，防抖可以保证最后一次滚动事件始终是触发的，而节流是在一段时间内执行一次，最后一次不保证会触发，除非手动修改节流方法，来最后一次保证始终触发。

修改后的节流方法如下：

// 节流, 不需要 setTimeout，只需要判断上次执行和本次触发时间的时间差
            // setTimeout只是用来兜底的，防止最后一次没有执行
            function throttle(fn, delay) {
                let timer = null;
                let begin = 0;
                return function () {
                    if (timer) {
                        clearTimeout(timer);
                    }
                    let flag = false;
                    let cur = new Date().getTime();
                    if (cur - begin > delay) {
                        fn.apply(this, arguments);
                        begin = cur;
                        flag = true;
                    }
                    console.log("flag", flag);
                    if (!flag) {
                        timer = setTimeout(() => {
                            console.log("兜底");
                            fn.apply(this, arguments);
                        }, delay);
                    }
                };
            }

修改前：

// 节流
const throttle = (func, delay) => {
    let lastTime = 0;
    return function (...args) {
        let now = +new Date().getTime();
        if (now - lastTime >= delay) {
            func.apply(this, args)
            lastTime = now;
        }
    }
}

// 防抖
function debounce(func,delay) {
    let timer = null;
    return function(...args){
        clearTimeout(timer)
        timer = setTimeout(() => {
            func.apply(this,args)
        }, delay);
    }
}