移动端键盘唤醒时 antd Modal 和 position: fixed； bottom: 0； 吸底按钮的处理方案

移动端键盘唤醒时 antd Modal 和 position: fixed; bottom: 0; 吸底按钮的处理方案

问题一

输入框获得焦点键盘唤醒时通过样式 position: fixed; bottom: 0 吸底的按钮会同步平移到键盘上方，体验很差

键盘弹出后吸底按钮跟随上移

原因分析

当键盘唤醒时，浏览器对应的高度区域就变成了除键盘之外的区域，而样式为 position: fixed; bottom: 0 理所应当的会在浏览器区域的最下方

解决方案

检测到屏幕高度变化时修改样式 position: fixed; bottom: 0 为 position: relative 自然的流式布局，并在检测到屏幕变大时恢复 position: fixed; bottom: 0 吸底样式

代码

const [isKeyboardShow, setIsKeyboardShow] = useState<boolean>(false);

useEffect(() => {
    setClientHeight(document.documentElement.clientHeight || document.body.clientHeight);
    window.onresize = () => {
        const currentHeight = document.documentElement.clientHeight || document.body.clientHeight;
        setClientHeight(pre => {
            if (currentHeight < pre) {
                setIsKeyboardShow(true);
                // 兼容有的浏览器 不变的时候也会触发
            } else if (currentHeight > pre) {
                setIsKeyboardShow(false);
            }
            return currentHeight;
        });
    };
}, []);

<div styles={{display: isKeyboardShow? 'relative' : 'fixed'}} >
    <Button>
        预约咨询定制服务
    </Button>
</div>

问题二

输入框获得焦点键盘唤醒时 antd Modal 弹框会滚动至最上方

键盘唤醒后 Modal 上移问题

原因分析

Antd Modal 默认是挂载到 body 上的，当键盘唤醒是，body 高度发生变化，导致 Modal 位置变化

解决方案

配置 Modal 挂载节点为当前或者其他不变的 dom 节点即可，Modal API ，

最终效果

移动端键盘唤醒时 Modal 和 吸底处理