React+Ts+Hook通过改变元素高度来实现原生下拉

tsx中

// 原生下拉（改变高度实现下拉效果）
import { useEffect, useRef } from 'react'
import './index.less'

export default () => {
  const PullBox = useRef<HTMLDivElement | null>(null);
  let disY: number = 0;
  let y: number = 0;
  let startY: number = 0;
  let endY: number = 0;
  let scale: number = 0;
  let clientHeights: number = 0;
  let moveHeight: number = 0;
  let scrollTop: number = 0;
  const GetBox = (): HTMLDivElement => {
    return PullBox.current as HTMLDivElement;
  }
  const GetChild = (n: number): HTMLDivElement => {
    return GetBox().children[n] as HTMLDivElement;
  }
  const FnMove = (ev: TouchEvent) => {
   
    scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    if(scrollTop<=0){
      startY = y;
      y = ev.changedTouches[0].pageY - disY;
      endY = y;
      
      moveHeight = clientHeights / 3;
      scale=Math.pow(y,0.8);
      // scale = clientHeights / moveHeight;
  
     
      if (startY < endY) {
        ev.preventDefault && ev.preventDefault();
      }
    GetChild(0).style.height = scale + 'px';
  }
   
  }
  const FnEnd = () => {
    GetChild(0).style.transition = '.4s ease height';
    startY = 0;
    endY = 0;
    if (scale > 80) {
      y = 80;
      GetChild(0).style.height = `${y}px`;
      setTimeout(() => {
        y = 0;
        GetChild(0).style.height = '.4s ease height';
        GetChild(0).style.height = `${y}px`;
      }, 1000)
    } else {
      y = 0;
      GetChild(0).style.height = `${y}px`;
    }
    GetChild(1).ontouchmove = null;
    GetChild(1).ontouchend = null;
  }
  const FnStart = (ev: TouchEvent) => {
    GetChild(0).style.transition = 'none';
    disY = ev.changedTouches[0].pageY - y;
    GetChild(1).ontouchmove = FnMove;
    GetChild(1).ontouchend = FnEnd;
  }


  useEffect(() => {
    GetChild(1).ontouchstart = FnStart;
    // GetChild(1).ontouchmove=FnMove;
    // GetChild(1).ontouchend=FnEnd;
    clientHeights = document.documentElement.clientHeight || document.body.clientHeight;
  })

  return (
    <div className="pulldown" ref={PullBox}>
      <div className="pulltop"></div>
      <div className="pulldown-box">
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
        <div className="pull-list"></div>
      </div>
    </div>
  )
}

less中

// 原生下拉（改变高度实现下拉效果）样式
.pulldown{
  width: 100vw;
  min-height: 100vh;
  position: relative;
  .pulltop{
    width: 100vw;
    background: aqua;
    overflow: hidden;
  }
  .pulldown-box{
    width: 100vw;
    // height: 70vh;
    background: salmon;
    // overflow-y: scroll;
    .pull-list{
      height: 10vh;
    }
    .pull-list:nth-child(2n){
        background: rgb(253, 68, 68);
    }
    .pull-list:nth-child(2n-1){
        background: rgb(31, 138, 246);
    }
  }
}