방법 - 스크롤바 숨기기
CSS로 스크롤바를 숨기는 방법을 알아보세요.
스크롤바를 숨기는 방법
overflow: hidden;
가로 및 세로 스크롤 막대를 모두 숨기려면 추가 합니다.
예시
body {
overflow: hidden; /* Hide scrollbars */
}
세로 스크롤 막대만 숨기거나 가로 스크롤 막대만 숨기려면 overflow-y
또는 overflow-x
다음 을 사용합니다.
예시
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
스크롤바의 기능 도 overflow: hidden
제거됩니다. 페이지 내에서 스크롤할 수 없습니다.
팁:overflow
속성 에 대해 자세히 알아보려면 CSS 오버플로 자습서 또는 CSS 오버플로 속성 참조 로 이동하세요 .
스크롤바를 숨기지만 기능은 유지
스크롤 막대를 숨기지만 계속 스크롤하려면 다음 코드를 사용할 수 있습니다.
예시
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Chrome, Safari 및 Opera와 같은 Webkit 브라우저는 비표준 ::-webkit-scrollbar
의사 요소를 지원하므로 브라우저 스크롤바의 모양을 수정할 수 있습니다. IE와 Edge는 -ms-overflow-style:
속성을 지원하고 Firefox는 scrollbar-width
속성을 지원하므로 스크롤바를 숨길 수 있지만 기능은 유지할 수 있습니다.