HTML5 스크롤 침투 방법

웹사이트는 모바일 측에서 조정되어야 합니다. 모바일 H5 및 웹 측에는 bluma와 같은 플렉스 레이아웃 솔루션이 사용됩니다.

H5에서 사용되는 목록은 React-Virtualized를 사용하여 테이블을 그립니다.

테이블에 있는 단일 데이터 행의 특정 세부 정보를 표시하려면 일반적인 해결 방법은 새 페이지나 팝업 창을 사용하는 것입니다.

여기서는 데이터의 단일 행을 클릭한 후의 데이터 세부 정보에 bluma의 모달 카드를 사용합니다.

구체적인 내용과 예시는 https://bulma.io/documentation/comComponents/modal/을 참조하세요.

단일 데이터 행을 클릭하면 팝업 창에 자세한 데이터가 표시되고 전체 모달 카드가 position:fixed로 설정됩니다.

바닥글 부분이 없습니다. 모달 카드의 높이를 전체 화면의 높이로 설정하세요: 100vh

성능:

• Chrome 브라우저에 표시되면 전체 모달 카드가 전체 화면을 차지합니다.
• 휴대폰의 디스플레이도 꽉 차 있는데, 문제는 제스처에 따라 움직이면 브라우저의 검색창 부분이 위로 밀려 올라가는데, 이때 팝업창 아래 데이터 목록 페이지가 나올 수 있다는 점이다. 슬라이드하면 팝업 창의 제목이 원래 브라우저의 검색창 부분을 덮게 되지만 그 사이에 지연이 있으므로 아래 페이지에서 데이터를 명확하게 볼 수 있습니다.
• 다른 휴대폰에서는 또 다른 화면이 나오겠지만, 슬라이딩 속도가 상대적으로 빨라서 팝업창이 나타난 직후에 슬라이드하면 팝업창 하단에도 마찬가지로 페이지가 작게 나옵니다. 팝업 창 아래에는 스크롤할 수 있으며 명백한 지연 및 데이터 스크롤 표시가 있습니다.

해결책:

JS + CSS 오버플로:숨김

JS를 통해 팝업 창 아래의 페이지 html에 CSS 클래스를 동적으로 추가합니다.

 if ($modalButtons.length > 0) { $modalButtons.forEach(function ($el) { $el.addEventListener('click', function () { var target = $el.dataset.target; openModal(target); } ); });}function openModal(target) { var $target = document.getElementById(target); rootEl.classList.add('is-clipped'); $target.classList.add('is-active');}

 잘린 상태 {overflow:hidden!important}

팝업창이 닫히면 JS를 통해 해당 페이지의 CSS 클래스를 삭제합니다: is-clipped

 function closeModals() { rootEl.classList.remove('is-clipped'); $modals.forEach(function ($el) { $el.classList.remove('is-active'); });}

그러나 이 솔루션을 애플리케이션에서 테스트한 결과 문제가 해결되지 않았으며 위의 문제가 여전히 발생하는 것으로 나타났습니다.

JS + CSS 위치:고정 + 스크롤탑

계획 아이디어:

1. 팝업창이 뜨면 html의 위치를 ​​고정으로 설정하세요. 팝업창을 닫은 후 html의 position 속성을 취소해주세요.
2. 목록 페이지가 스크롤되고, 스크롤이 발생한 후에 클릭된 행이 발생할 수 있으므로 html 페이지 자체의 scrollTop 값을 계산해야 합니다.
3. 팝업창 발생시 위치를 고정으로 설정하면 html 페이지의 scrollTop 값이 0 이 되어 페이지 상단으로 돌아가기 때문에 팝업창을 닫은 후 수동으로 설정해 주어야 합니다. html 페이지의 원래 위치로 스크롤할 수 있도록 하는 html 페이지의 scrollTop 값입니다.
4. 호환성을 위해서는 다양한 속성의 scrollTop 값을 설정해야 합니다.

팝업 창 전:

 const scrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;global.document.documentElement.style.position = 'fixed';this.scrollTop = scrollTop;

팝업 창을 닫습니다.

 closeModalHandler = () => { const { closeOrderHistoryModal } = this.props; global.document.documentElement.style.position = ''; global.pageYOffset = this.scrollTop = this.scrollTop; .document.body.scrollTop = this.scrollTop; closeOrderHistoryModal();}

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.