CSS로 스크롤 숨기기 또는 비활성화

콘텐츠를 잘라낼지, 스크롤 자체를 막을지, 스크롤 막대만 숨길지에 따라 CSS를 선택하세요. overflow: hidden은 넘친 콘텐츠를 자르고 표시되는 스크롤 막대를 제거하므로 단순한 시각적 변경이 아닙니다.

올바른 CSS 규칙 선택

overflow 단축 속성은 가로와 세로의 넘침을 제어합니다. 의도적으로 잘라낼 때만 hidden을 사용하세요. 영역이 계속 스크롤 가능하다는 것을 알 수 있을 때만 scrollbar-width: none을 사용하세요. overflow-x는 원인을 고친 뒤 마지막 보호 장치로 사용합니다.

스크롤을 비활성화하고 넘침 자르기

컴포넌트를 제한하고 필요한 축만 지정합니다. 기본 스크롤 막대가 사라지고 상자 밖의 콘텐츠가 잘립니다.

<div class="preview-panel"><p>Visible text.</p><p>Extra text is clipped.</p></div>

.preview-panel { max-block-size: 8rem; overflow-y: hidden; border: 1px solid #777; padding: 1rem; }

결과에는 세로 스크롤 막대가 없고 아래쪽 경계 밖의 텍스트도 보이지 않습니다. 잘린 콘텐츠가 불필요하거나 다른 컨트롤로 표시할 수 있을 때만 사용하세요. 모달에서는 임시 클래스로 html과 body의 페이지 스크롤을 막을 수 있지만 마우스, 터치, 키보드, 닫기 동작을 확인해야 합니다.

스크롤 막대는 숨기고 스크롤은 유지

모든 콘텐츠에 접근해야 한다면 overflow-y: auto를 유지하고 표준 속성과 제한된 폴백으로 막대만 숨깁니다.

.scroll-area { max-block-size: 10rem; overflow-y: auto; }
@supports (scrollbar-width: none) { .scroll-area { scrollbar-width: none; } }
@supports not (scrollbar-width: none) { .scroll-area::-webkit-scrollbar { display: none; } }

상자는 휠, 터치, 키보드 또는 트랙패드로 계속 스크롤됩니다. ::-webkit-scrollbar는 비표준입니다. 막대를 숨기면 스크롤 방법을 알아보기 어려우므로 보이는 단서나 대체 컨트롤을 제공하세요.

가로 넘침 방지

가로 스크롤 막대는 고정 폭 미디어, 줄어들지 않는 flex 항목, 끊을 수 없는 문자열 같은 레이아웃 오류를 드러내는 경우가 많습니다. 먼저 원인을 고치세요.

.page-content { max-inline-size: 100%; overflow-x: hidden; }
.page-content img, .page-content video { display: block; max-inline-size: 100%; block-size: auto; }
.page-content code { overflow-wrap: anywhere; }

overflow-x: hidden은 최종적인 자르기 보호 장치입니다. overflow-x: clip은 프로그램 방식 스크롤도 막으므로 키보드 사용에 필요한 콘텐츠를 감싸지 마세요.

overscroll-behavior와 혼동하지 않기

overscroll-behavior: contain은 스크롤 가능한 모달 가장자리에서 스크롤 연쇄를 제어합니다. 스크롤 막대를 숨기거나 스크롤을 비활성화하지는 않습니다.

접근성과 브라우저 참고 사항

중요한 텍스트, 탐색, 입력 필드 또는 컨트롤을 명확한 대안 없이 숨기지 마세요. 키보드 포커스를 확인하여 Tab이 다시 표시할 수 없는 잘린 콘텐츠에 도달하지 않게 하세요. overflow: hidden은 포커스된 콘텐츠나 스크립트로 스크롤한 콘텐츠를 여전히 표시할 수 있지만 clip은 그렇지 않습니다. scrollbar-gutter: stable은 공간만 예약합니다. 좁고 넓은 화면, 휠, 터치, Page Down, 화살표, Tab, 가장자리 근처의 포커스 요소를 테스트하세요.

게시하기 전에 좁고 넓은 뷰포트에서 일반 상태와 제한 상태를 모두 테스트하세요. 모달을 닫으면 페이지 스크롤이 복원되어야 하고 모달 자체의 콘텐츠도 계속 접근할 수 있어야 합니다. 자르기로 문제를 숨기지 말고 지나치게 큰 이미지, 긴 URL, 서식이 지정된 코드, flex 또는 grid 자식을 점검하세요.