모바일 에지 브라우저의 소프트 키보드가 팝업 된 후 페이지 스크롤 문제를 해결하는 방법은 무엇입니까?

모바일 엣지 브라우저 소프트 키보드가 팝업되어 페이지 스크롤 문제 및 솔루션을 유발합니다.

휴대 전화에서 에지 브라우저를 사용하는 경우, 입력 상자에 소프트 키보드가 팝업 된 후 페이지는 종종 성가신 문제가 있습니다. 페이지 높이는 변경되지 않고 여전히 위아래로 스크롤 할 수 있으며, 특히 페이지 내용이 화면을 초과 할 때 예상 효과와 일치하지 않습니다. 이 기사는이 문제를 분석하고 솔루션을 제공합니다.

문제 간단한 설명 : 간단한 HTML 페이지 (입력 상자 포함)에서 소프트 키보드가 팝업 된 후 페이지는 시각적 영역과 일치하도록 높이를 자동으로 조정하지 못하지만 원래 높이를 유지하여 스크롤 막대를 유지하고 스크롤을 스크롤하여 사용자 경험에 영향을 미칩니다.

솔루션 1 : 컨테이너를 사용하여 스크롤링을 제어하십시오

이 문제는 CSS 스타일 및 HTML 구조 조정을 통해 효과적으로 해결할 수 있습니다. 방법은 다음과 같습니다. 입력 상자를 div 컨테이너로 감고 본체의 overflow 로 속성을 hidden 지고 touch-action 속성을 none 십시오.

HTML 코드 :

<div class="frame">
  <input type="text">
</div>

CSS 코드 :

 몸 {
  오버플로 : 숨겨진;
  터치 액션 : 없음;
}

overflow: hidden 바디 스크롤, touch-action: none 더 이상 터치 스크롤을 금지합니다. .frame 컨테이너에는 입력 상자 영역을 표시하고 정상적으로 상호 작용할 수 있도록 입력 상자가 포함되어 있습니다.

해결책 2 : 페이지 높이를 동적으로 조정하십시오

더 간단한 솔루션은 브라우저 창 크기를 사용하여 이벤트를 변경 resize 페이지 높이를 동적으로 조정하는 것입니다. resize 이벤트 리스너에서는 페이지 높이를 visualviewport.height 로 설정하여 시각적 영역 변경에 따라 페이지 높이가 조정되도록하십시오. 이를 위해서는 JavaScript 구현이 필요합니다.

그러나 위의 접근 방식이 있더라도 입력 상자 자체와 같은 일부 특수한 경우 스크롤링을 허용하므로 입력 상자를 드래그하면 페이지가 여전히 스크롤 될 수 있습니다. 이를 위해서는 더 깊은 분석과보다 복잡한 솔루션이 필요합니다.

위 내용은 모바일 에지 브라우저의 소프트 키보드가 팝업 된 후 페이지 스크롤 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!