兼容性:h5在IOS中收起鍵盤時頁面不會下滑的問題

場景: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;

暫時現這樣了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章