H5页面，在IOS溢出滚动卡顿、滑动不了兼容问题处理

import React, { FC, useEffect } from 'react'

import { useSelector } from 'react-redux'

import './index.less'

interface IProps {
    paramsType: number | string
}
const FooterPopUp: FC<IProps> = (props: IProps) => {
    const { data } = useSelector((state: any) => state.addOrEditDevice)

    const { paramsType } = props

    const disableSystemScrolling = (type: boolean, cls: string) => {
        const htmlEl = document.querySelector('html')
        const bodyEl = document.querySelector('body')
        if (type) {
            htmlEl!.classList.add(cls)
            bodyEl!.classList.add(cls)
        } else {
            htmlEl!.classList.remove(cls)
            bodyEl!.classList.remove(cls)
        }
    }

    useEffect(() => {
        try {
            disableSystemScrolling(true, 'disableSystemScrolling')
        } catch (error) {}
        return () => {
            // 没有删除功能
            disableSystemScrolling(false, 'disableSystemScrolling')
            // confirmAlert && confirmAlert.removeElementReconfirm()
        }
    }, [])
    if (paramsType < 80) return null
    return (
        <div className="add-edit-device-wrap-pop">
            <div className="add-edit-device-pop">
                <ul className="add-edit-device-pop-ul">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                </ul>
            </div>
            <div className={'add-edit-device-pop-title'}>
                <div className={'add-edit-device-pop-title-text'}>请选择</div>
            </div>
            <div className={'add-edit-device-pop-footer'}>
                <div className={'add-edit-device-pop-footer-text'}>保存</div>
            </div>
        </div>
    )
}

export default FooterPopUp

@import '~@/assets/css/mixin.less';
@heightH: 700px;
@heightFooter: 100px;
@widthW: 750px;

.add-edit-device-wrap-pop {
    width: 70%;
    height: 100vh;
    z-index: 99;
    position: fixed;
    bottom: 0;
    background: #54ff4e33;
    overflow: hidden;
    overflow-y: scroll;

    .add-edit-device-pop {
        width: 50%;
        min-height: 100%;
        padding: @heightH 36px 0px;
        background: #f34d4d;
        .add-edit-device-pop-ul {
            height: calc(100vh - @heightH - @heightFooter);
            background: rgb(128, 127, 127);
            overflow: hidden;
            overflow-y: scroll;
            li {
                margin-bottom: 30px;
                height: 150px;
                background: rgb(68, 71, 250);
            }
        }
    }
    .add-edit-device-pop-title {
        position: fixed;
        left: 0;
        top: 0;
        background: rgb(74, 207, 248);
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 30%;
        height: @heightH;
        .add-edit-device-pop-title-text {
            // position: absolute;
            // left: 0;
            // bottom: 0;
            width: 100%;
            height: 100px;
            background: #fff;
        }
    }
    .add-edit-device-pop-footer {
        width: @widthW;
        height: @heightFooter;
        position: fixed;
        left: 0;
        bottom: 0;
        background: rgb(252, 40, 199);
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.disableSystemScrolling {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    min-height: 100vh;
    overflow-y: scroll;
    background: #3695f5;
}