場景:IOS嵌入的h5頁面,頁面上彈框,彈框裏有輸入框
操作:當輸入框獲得焦點時拉起鍵盤,點擊彈框的遮罩層,彈框關閉
問題:彈框關閉後頁面沒有下滑,再打開彈框時輸入框無法獲取到焦點
原因:遮罩層是fixed定位(頁面有滾動條)當鍵盤拉起時fixed好像失效了
解決方案:
const u = navigator.userAgent;
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios終端
if (isiOS) {
if (visible) { // 展示彈框時,
setScrollY(document.body.scrollTop || document.documentElement.scrollTop);
setOnFocus(true);
// window.scrollTo(0, 0);
// return true;
} else {
setScrollY(0);
setOnFocus(false);
}
}
// mask樣式
maskStyle=onFocus ? { position: 'absolute', top: scrollY, bottom: -scrollY } : null;
暫時現這樣了