2021.0305穿透问题，解决ios软键盘滑动问题

如何解决ios穿透问题

测试提出的问题，解决了几个小时才研究出来，学艺不精，来这里自己记录一下，加深记忆也分享给大家

简单数据穿透

一般穿透体现在弹窗上面，弹窗可以滑动，但背后的页面是不可以滑动的，这个时候我们可以采用给父元素增添一个overflow：hidden的方式解决。

js 页面

css 页面

ios会出现 点击弹窗的输入框，软键盘展示，但下面的弹窗是可以拉动的。

解决办法就要用的touchmove 事件
js 页面

useEffect(() => {
        if (showCollegeSearch || showMajorSearch) {
            setTimeout(() => {
                const $mask = document.querySelector(
                    "#searchMask"  //这是我的遮罩层
                ) as HTMLElement;
                const $modal = document.querySelector(
                    "#collegeList"  //这是我的遮罩层的列表
                ) as HTMLElement;
                noScrollPenetration($mask, $modal)//这是我封装的函数
                document
                    .querySelector("#inputBox")
                    ?.addEventListener("touchmove", (e) => e.preventDefault(), {
                        passive: false,   //阻止默认冒泡事件
                    });
                document
                    .querySelector("#clearBox")
                    ?.addEventListener("touchmove", (e) => e.preventDefault(), {
                        passive: false,
                    });
            }, 300);
        }
    }, [showCollegeSearch, showMajorSearch]);

另外封装了一个 utils.js

export const noScrollPenetration = (
    $mask: HTMLElement,
    $modal: HTMLElement
) => {
    const listenerOpts = { passive: false };
    $mask.addEventListener(
        "touchmove",
        (e) => e.preventDefault(),
        listenerOpts
    );

    let startY = 0;

    $modal.addEventListener(
        "touchstart",
        (e) => {
            startY = e.targetTouches[0].clientY;
        },
        listenerOpts
    );

    $modal.addEventListener(
        "touchmove",
        (e) => {
            const modalHeight = $modal.clientHeight;
            const modalScrollHeight = $modal.scrollHeight;
            const scrollTop = $modal.scrollTop;
            const endY = e.targetTouches[0].clientY;
            const delta = endY - startY;
            //     alert(
            //         `scrolltop:${scrollTop},modalHeight:${modalHeight},modalScrollHeight:${modalScrollHeight},delta:${delta}`
            //     );

            if (
                (scrollTop === 0 && delta > 0) ||
                (scrollTop + modalHeight + 1 >= modalScrollHeight && delta < 0)
            ) {
                e.preventDefault();
                e.stopPropagation();
            }
        },
        listenerOpts
    );
};

希望可以帮到大家！掰掰~