部分安卓機(jī)型在使用position:fixed時(shí)當(dāng)呼出輸入框并不會浮于輸入框上方而是被覆蓋。

image

定位在底部的對話框被覆蓋了。

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

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

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

function ApplyPopup() {
    const modalEle = useRef()
    const windowHeight = window.innerHeight // 初次獲取屏幕高度
    function inputFocus(){
        // 當(dāng)獲取到焦點(diǎn)時(shí) 如果 position: fixed 沒生效 證明高度沒變 
        if(windowHeight === window.innerHeight){
            // 高度沒變 證明被覆蓋 此時(shí)直接滾動到可視區(qū)域
            modalEle.current.scrollIntoView()
        }
    }
    return (
        <div ref={modalEle} style = {{position : 'fixed'}}>
            <input type='number' pattern='[0-9]*'  placeholder='請輸入手機(jī)號' onFocus={inputFocus} /> 
        </div>  
    )   
}
export default ApplyPopup