苹果（iphone）和安卓处理都兼容的下拉和滚动（ts+函数组件）

代码如下：通过window自带方法判断是不是iphone处理兼容

import { useRef, useEffect, useState } from 'react'
import './index.less'

export default function Top() {
    const TopBox = useRef<HTMLDivElement | null>(null)
    let disY: number = 0;
    let y: number = 0;
    let scale: number = 0;
    let startY: number = 0;
    let endY: number = 0;
    let scropllTops: number = 0;
    let [clientHeights, setClientHeight] = useState(0);
    const GetBox = (): HTMLDivElement => {
        return TopBox.current as HTMLDivElement
    };
    const Getchild = (n: number): HTMLDivElement => {
        return GetBox().children[n] as HTMLDivElement
    }
    const FnMove = (ev: TouchEvent) => {
        scropllTops = document.documentElement.scrollTop || document.body.scrollTop
        if (scropllTops <= 0) {
            y = ev.changedTouches[0].pageY - disY
            startY = y

            scale = clientHeights / 120
            if (startY > endY && Getchild(1).scrollTop == 0) {
                if (GnKernel()) {

                } else {
                    ev.preventDefault && ev.preventDefault()
                }
            }
            Getchild(0).style.height = y / scale + 'px';
            endY = y

        }

    }
    const FnEnd = (ev: TouchEvent) => {
        Getchild(0).style.transition = '.4s ease height';

        if (y > 80) {

            y = 80;
            setInterval(() => {
                y = 0;
                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;
        return false;
    }
    const GnKernel = (): boolean => {
        if (window.navigator.userAgent.toLowerCase().indexOf("iphone") !== -1) {
            return true
        } else {
            return false
        }
    }
    const FnScroll = (() => {
        scropllTops = document.documentElement.scrollTop
        if (scropllTops <= 0) {
            document.documentElement.scrollTop = 0
        }
    })
    useEffect(() => {
        setClientHeight(document.documentElement.clientHeight || document.body.clientHeight)
        Getchild(1).ontouchstart = FnStart
        document.onscroll = FnScroll

    })

    return (
        <div className='top' ref={TopBox}>
            <div className="tops"></div>
            <div className="top-box"></div>
        </div>
    )
}