모달이 열리면 페이지 스크롤을 방지하십시오

모달 박스가 열리면 페이지 스크롤을 방지하십시오

이 상황에 직면 한 적이 있습니까? 모달 상자를 열고, 스크롤하고, 닫고, 페이지가 다른 위치로 점프합니까?

이는 모달 상자가 페이지의 요소 일 뿐이므로 제자리에 남아있을 수 있지만 나머지 페이지는 여전히 제대로 작동하고 있습니다.

때로는 화면 높이가 뷰포트 높이와 정확히 동일 할 때와 같이 중요하지 않습니다. 그러나 다른 경우에는 스크롤 문제가 발생합니다. 좋은 소식은 일부 CSS (및 JavaScript) 트릭으로이를 방지 할 수 있다는 것입니다.

간단한 솔루션으로 시작하십시오

전체 뷰포트 높이로 전신의 높이를 설정하고 모달 박스가 열리면 수직 오버플로를 숨겨서 모달 박스를 열면 페이지 스크롤 문제를 크게 줄일 수 있습니다.

 <code>body.modal-open { height: 100vh; overflow-y: hidden; }</code>

이것은 좋지만 모달 박스를 열기 전에 페이지 요소를 스크롤 한 경우 약간의 수평 재 배열이 발생합니다. 뷰포트 너비는 약 15 픽셀만큼 증가하며, 이는 정확히 스크롤 바의 너비입니다. 이것을 피하기 위해 몸의 올바른 채우기를 조금 조정합시다.

 <code>body { height: 100vh; overflow-y: hidden; padding-right: 15px; /* 避免宽度重排*/ }</code>

이 방법이 작동하려면 모달 박스의 높이가 뷰포트 높이보다 작아야합니다. 그렇지 않으면 몸의 스크롤 막대가 필요합니다.

모바일에서 무엇을해야합니까?

이 솔루션은 데스크탑과 Android Mobile에서 잘 작동합니다. 그러나 iOS 사파리는 터치 스크린을 클릭하고 이동할 때 모달 상자가 열릴 때 몸이 여전히 스크롤되기 때문에 더 많은 처리가 필요합니다.

우리는 신체를 해결책으로 고정 포지셔닝으로 설정할 수 있습니다.

 <code>body { position: fixed; }</code>

이제 괜찮아! 화면을 만질 때는 몸이 반응하지 않습니다. 그러나 여기에는 여전히 "작은"문제가 있습니다. 모달 박스 트리거가 페이지 하단에 있다고 가정하면 클릭하여 열 수 있습니다. 매우 좋은! 그러나 이제 우리는 화면 상단으로 자동 스크롤하여 해결하려는 스크롤 동작만큼 혼란 스럽습니다.

죄송합니다!

따라서 JavaScript를 사용해야합니다

터치 이벤트의 거품을 피하기 위해 JavaScript를 사용 할 수 있습니다. 우리는 모두 모달 상자가 열릴 때 배경 레이어가 있어야한다는 것을 알고 있습니다. 불행히도, iOS에서는 스톱 포거레이션이 터치 이벤트와 함께 일하기가 약간 어색합니다. 그러나 예방 대표는 매우 잘 작동합니다. 즉, 배경이나 모달 박스 레이어뿐만 아니라 모달 박스에 포함 된 각 DOM 노드에 이벤트 리스너를 추가해야합니다. 좋은 소식은 입증 된 jQuery를 포함하여 많은 JavaScript 라이브러리가이를 수행 할 수 있다는 것입니다.

한 가지 더 : 모달 상자 안에 스크롤해야한다면 어떻게해야합니까? 우리는 여전히 터치 이벤트에 대한 응답을 트리거해야하지만, 모달 박스의 상단 또는 하단에 도달 할 때 버블 링을 중지해야합니다. 이것은 매우 복잡해 보이므로 문제를 완전히 해결하지 못했습니다.

고정 본체 방법

우리가 사용하는 것은 다음과 같습니다.

 <code>body { position: fixed; }</code>

스크롤의 최상위 위치를 알고 CSS에 추가하면 차체가 화면 상단으로 다시 스크롤되지 않으므로 문제가 해결됩니다. JavaScript를 사용하여 스크롤 상단을 계산하고 신체 스타일에 해당 값을 추가 할 수 있습니다.

 // 모달 상자가 표시되면 고정 본체가 필요합니다.
document.body.style.position = '고정';
document.body.style.top =`-$ {window.scrolly} px`;

// 모달 상자가 숨겨져있을 때, 우리는 그것을 두루마리 위치 문서의 상단에 보관해야합니다. body.style.position = '';
document.body.style.top = '';

이것은 작동하지만 모달 박스가 닫힌 후에도 여전히 약간의 누출이 있습니다. 구체적으로, 모달 상자가 열리고 본체가 고정되면 페이지가 스크롤 위치를 잃어버린 것 같습니다. 그래서 우리는 위치를 회수해야합니다. 이 문제를 해결하기 위해 JavaScript를 수정합시다.

 // 모달 상자가 숨겨져있을 때 ...
const scrolly = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollto (0, parseint (Scrolly || '0') * -1);

못 박았다! 모달 상자가 열리면 더 이상 스크롤되지 않으며 모달 상자가 열리고 닫을 때 스크롤 위치에 남아 있습니다. 오랫동안 살다!

위 내용은 모달이 열리면 페이지 스크롤을 방지하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!