h5上滑加载，有触底距离（vue+ts）

<div class="content" id="scroll"></div>

let oldScrollTop: number = 0; // 记录上一次滚动结束后的滚动距离
const scrollTop = ref<number>(0); // 记录当前的滚动距离
const scrollFixedStatus = ref<boolean>(true);

let drop : number = 0;//判断下滑动作
let bottom : number = 0;//控制方法只触发一次（锁定）
let down : number = 0;//触底或拿到新数据解锁
const handleScroll = () => {
  window.addEventListener("scroll", () => {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    // scrollTop滚动条当前值，drop滚动条上一秒的值，scroll > 0 时上滑
    const scroll = scrollTop - drop;//上滑
    // scrollHeight是现有视图高度，down原视图高度，scrolls > 0 时拿到新数据
    const scrolls = scrollHeight - down;
    drop = scrollTop
    down = scrollHeight 
    // 拿到新数据后， bottom = 0解锁
    if (scrolls > 0 || scrollTop + windowHeight ==scrollHeight){
      bottom = 0
    }
    // 上滑且解锁状态，当滚动条离触底还有一段距离时page++，然后调用接口
    if(scroll > 0 && bottom == 0) {
      if (scrollTop + windowHeight >= scrollHeight - 500) {
        data.pages ++
        bottom = 1;
        pageData()
      }
    }
  })
}
onBeforeUnmount(() => {
  window.removeEventListener("scroll", () => {})
})