移动端H5开发输入框fixed定位失效

部分安卓机型在使用position:fixed时当呼出输入框并不会浮于输入框上方而是被覆盖。

定位在底部的对话框被覆盖了。

如果是在原生JS中直接使用scrollIntoView就好了。

在React中可以使用useRef直接获取到element

import React, { useState, useEffect, useRef } from 'react';

function ApplyPopup() {
    const modalEle = useRef()
    const windowHeight = window.innerHeight // 初次获取屏幕高度
    function inputFocus(){
        // 当获取到焦点时 如果 position: fixed 没生效 证明高度没变 
        if(windowHeight === window.innerHeight){
            // 高度没变 证明被覆盖 此时直接滚动到可视区域
            modalEle.current.scrollIntoView()
        }
    }
    return (
        <div ref={modalEle} style = {{position : 'fixed'}}>
            <input type='number' pattern='[0-9]*'  placeholder='请输入手机号' onFocus={inputFocus} /> 
        </div>  
    )   
}
export default ApplyPopup