웹 개발에서 스크롤바를 숨기지 않고 비활성화하려면 어떻게 해야 합니까?

숨기지 않고 스크롤바 비활성화

웹 개발에서는 라이트박스를 사용하는 동안 상위 요소의 스크롤바를 비활성화해야 하는 경우가 있습니다. 그러나 Overflow: Hidden을 사용하여 단순히 스크롤 막대를 숨기는 것은 사이트가 점프하여 스크롤 막대가 있던 공간을 차지할 수 있기 때문에 바람직하지 않은 경우가 많습니다.

계속 표시하는 동안 스크롤 막대를 비활성화할 수 있는 실행 가능한 솔루션이 있습니다. 그들을. 라이트박스 아래의 페이지를 상단에 배치할 수 있는 경우 다음 CSS 코드를 활용할 수 있습니다.

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

이렇게 하면 스크롤 막대가 표시되지만 콘텐츠가 스크롤되지는 않습니다. 라이트박스를 닫은 후 스크롤바를 복원하려면 다음 속성을 되돌리기만 하면 됩니다.

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

이 접근 방식은 스크롤 이벤트를 수정할 필요가 없습니다.

기존 스크롤 위치 해결

라이트박스가 열리기 전에 페이지가 이미 스크롤된 경우 JavaScript를 통해 현재 스크롤 위치를 검색하고 할당할 수 있습니다. 이는 body 요소의 최상위 속성입니다. 이렇게 하면 라이트박스 사용 중에 현재 스크롤 위치가 유지됩니다.

CSS

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

JavaScript

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

By 이 솔루션을 구현하면 스크롤바를 숨기지 않고 효과적으로 비활성화하여 의도한 시각적 표현을 유지할 수 있습니다. 웹페이지.

위 내용은 웹 개발에서 스크롤바를 숨기지 않고 비활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!