본문 스크롤바를 숨기지 않고 비활성화하는 방법은 무엇입니까?

가시성을 유지하면서 HTML/본문 스크롤 막대 비활성화

최적의 라이트박스 경험을 위해 숨기지 않고 상위 요소의 스크롤 막대를 일시적으로 비활성화할 수 있습니다. 그것. 이를 달성하려면 다음 접근 방식을 고려하세요.

상위 요소 수정:

라이트박스를 열 때 오버레이 기본 페이지에 다음 CSS 속성을 할당하세요.

body {
  position: fixed;
  overflow-y: scroll;
}

스크롤 막대의 위치를 ​​유지하면서 페이지 위치를 고정하고 세로 스크롤을 페이지 자체로 제한합니다. 가시성.

라이트박스 닫기에서 재설정:

라이트박스를 닫을 때 원래 CSS 속성을 복원합니다.

body {
  position: static;
  overflow-y: auto;
}

기존 처리 스크롤:

페이지의 현재 스크롤 위치를 유지하려면 JavaScript를 사용하세요. 라이트박스를 열기 전에 문서의 scrollTop 값을 가져와서 body 요소의 top 속성으로 할당하려면:

.noscroll {
  position: fixed;
  top: var(--st, 0);
  inline-size: 100%;
  overflow-y: scroll;
}

const b = document.body;
b.style.setProperty('--st', -(document.documentElement.scrollTop) + "px");
b.classList.add('noscroll');

위 내용은 본문 스크롤바를 숨기지 않고 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!