스크롤바를 숨기지 않고 스크롤바 스크롤을 방지하려면 어떻게 해야 합니까?

숨기지 않고 스크롤바 스크롤 방지

라이트박스를 구현할 때 흔히 발생하는 문제는 상위 페이지의 스크롤바를 일시적으로 비활성화해야 한다는 것입니다. 오버플로: 숨김;. 이 해결 방법은 원치 않는 점프와 공간 점유를 유발할 수 있습니다.

다행히 스크롤바를 표시하는 동안 비활성화할 수 있는 실행 가능한 접근 방식이 있습니다. 오버레이 아래 요소에 대한 고정 위치 지정을 활용하면 이 효과를 얻을 수 있습니다. 오버레이가 활성화되면 본문에 다음 스타일을 적용합니다.

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

이렇게 하면 스크롤바가 표시되지만 기능은 비활성화됩니다. 오버레이를 닫을 때 이 변경 사항을 되돌리려면 원래 스타일을 복원하면 됩니다.

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

페이지가 이미 스크롤된 경우 JavaScript를 통해 현재 스크롤 위치를 캡처하고 이를 body 요소는 오버레이가 활성화될 때 페이지가 현재 스크롤 위치에 유지되도록 합니다. 이는 다음 CSS 및 JS를 사용하여 달성할 수 있습니다.

.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!