w3.css

스크롤바 숨기기

CSS로 스크롤바를 숨기는 방법을 알아보자.

스크롤바를 숨기는 방법

overflow: hidden;를 추가하여 가로 및 세로 스크롤바를 모두 숨긴다.

1단계) HTML 추가

body {
  overflow: hidden; /* Hide scrollbars */
}

세로 스크롤바만 숨기거나 가로 스크롤바만 숨기려면 overflow-y 또는 overflow-x를 사용한다.

예제

body {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

overflow: hidden을 선택하면 스크롤바의 기능도 제거된다는 점에 유의하자. 페이지 내부로 스크롤할 수 없다.

스크롤바 숨기기, 기능은 유지

스크롤바를 숨기면서도 스크롤은 계속할 수 있게 하려면 다음 코드를 사용하면 된다.

예제

/* 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-scrollbarpseudo 요소를 지원하여 브라우저 스크롤바의 모양을 수정할 수 있다. IE와 Edge는 -ms-overflow-style: 속성을 지원하고 Firefox는 스크롤바를 숨기지만 기능은 유지할 수 있는 속성 scrollbar-width을 지원한다.

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기