스크롤 막대를 표시한 상태에서 스크롤을 비활성화하려면 어떻게 해야 합니까?

스크롤을 비활성화하면서 스크롤 막대 표시 유지

overflow:hidden을 사용하여 스크롤 막대를 숨길 수 있지만 이 접근 방식은 웹 사이트에 시각적 변화를 만들 수 있습니다. . 가시성을 손상시키지 않고 스크롤을 비활성화하려는 경우 방법은 다음과 같습니다.

페이지 위치 수정:

오버레이 아래의 페이지를 상단에 고정할 수 있는 경우 오버레이를 열 때 CSS를 따르세요.

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

이렇게 하면 스크롤바 가시성은 유지되지만 콘텐츠 스크롤은 방지됩니다. 오버레이 종료 시 스크롤을 복원하려면 다음 CSS를 사용하세요.

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

스크롤 위치 유지:

페이지가 미리 스크롤된 경우 document.documentElement.scrollTop을 가져옵니다. 자바스크립트를 사용합니다. 이 값을 body 요소의 최상위 속성으로 동적으로 할당합니다. 이렇게 하면 오버레이 기간 동안 현재 스크롤 위치가 유지됩니다.

CSS:

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

JS:

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

위 내용은 스크롤 막대를 표시한 상태에서 스크롤을 비활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!