스크롤바 숨기는 방법

CSS를 사용하여 스크롤바를 숨기는 방법을 배우세요.

스크롤바 숨기는 방법

추가 overflow: hidden;을 사용할 수 있습니다. 수평과 수직 스크롤바를 동시에 숨길 수 있습니다.

예제

body {
  overflow: hidden; /* 스크롤바 숨기기 */
}

본인이 직접 시도해보세요

수직 스크롤바만 숨기거나 수평 스크롤바만 숨기려면 다음을 사용하세요 overflow-y 또는 overflow-x:

예제

body {
  overflow-y: hidden; /* 수직 스크롤바 숨기기 */
  overflow-x: hidden; /* 수평 스크롤바 숨기기 */
}

본인이 직접 시도해보세요

주의하세요overflow:hidden 스크롤바의 기능도 제거됩니다. 페이지 내에서 스크롤을 할 수 없습니다.

스크롤바 숨기고 기능 유지

스크롤바를 숨기면서 계속 스크롤을 가능하게 하려면 다음 코드를 사용할 수 있습니다:

예제

/* Chrome, Safari, Opera에서 스크롤바를 숨기기 */
.example::-webkit-scrollbar {
  display: none;
}
/* IE, Edge, Firefox에서 스크롤바를 숨기기 */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

본인이 직접 시도해보세요

Webkit 브라우저(Chrome, Safari, Opera와 같은)가 비표준을 지원합니다 ::-webkit-scrollbar pseudo-element, 브라우저 스크롤바의 외관을 수정할 수 있도록 합니다. IE 및 Edge가 지원합니다 -ms-overflow-style: 속성, Firefox가 지원합니다 scrollbar-width 속성, 이러한 속성은 스크롤바를 숨기면서 기능을 유지할 수 있도록 합니다.

相关页面

教程：CSS 부차

참조 매뉴얼:CSS overflow 속성