h5 ios의 소프트 키보드는 밑에 고정된 내비게이션 표시줄 위에 있는 해결 방법

2101 단어
이 BUG는 주로 ios에 고정되어 효력이 발생하지 않기 때문에 키보드가 튕기면 전체 화면이 튕겨집니다. 인터넷에서 여러 가지 방법을 시도했지만 잘 해결되지 않았습니다.
나중에 코드로 고정된 원소를 끌어내리는 원리는 감청 롤러로 고정된 원소를 수동으로 잡는 것이다
코드 보기
 var u = navigator.userAgent;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios  

    if (isIOS) {
      document.body.addEventListener('focusin', () => {//        
        window.onscroll = function (e) {
          clearTimeout(that.time2)
          let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          document.querySelector('.djq-editor-header').style.top = scrollTop + 'px';
          document.querySelector('.djq-editor-header').style.display = 'none';
          document.querySelector('.djq-editor-container').style.height = '300' + 'px';

          that.time2 = setTimeout(() => {//                        
            let t2 = document.documentElement.scrollTop || document.body.scrollTop;
            that.setState({t2});
            if (t2 == scrollTop) {
              document.querySelector('.djq-editor-header').style.display = 'flex';
            }
          }, 180);
        }
      })

      document.body.addEventListener('focusout', () => {// 
        window.onscroll = null;
        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
        document.querySelector('.djq-editor-header').style.top = 0 + 'px';
        document.querySelector('.djq-editor-header').style.display = 'flex';
        document.querySelector('.djq-editor-container').style.height = '600px';
        clearTimeout(that.time2)
      })
    }

원리는 바로 키보드가 튀어나올 때 감청 페이지의 굴러가서 튀어나온 요소를 끌어내리는 것이다. 실시간 감청이기 때문에 깜빡거릴 수 있다. 이때 내가 다시 굴러갈 때 그를 숨긴다.
그리고 스크롤이 끝날 때 다시 그를 보여줍니다. 이럴 때 스크롤 끝을 감청하는 함수를 써야 합니다...코드가 위에 있어요. 원리는 스크롤 후 어느 시간대예요.
마지막 스크롤탑이 실시간으로 굴러가는 스크롤탑과 일치하는지 타이머로 판단합니다.이 방법은 직접 측정해도 효과가 있다.의심이 있으면 나를 찾아라.
그런데 결국 수요는 잘렸어요.
 
전재 대상:https://www.cnblogs.com/lisiyang/p/10573264.html

좋은 웹페이지 즐겨찾기