[CSS] 스크롤바(scrollbar) 스타일 제거하는 방법

스크롤바 동작은 유지하면서 스타일을 없애는 방법에 대해 알려드리겠습니다. 대부분의 웹 브라우저는 스크롤바에 대해 일부 CSS 스타일을 지원하므로, 스크롤바를 숨기거나 사용자 정의할 수 있습니다.

 

스크롤바는 어떠한 경우에 노출되는가?

스크롤바는 HTML 문서의 내용이 화면에 표시되는 공간을 벗어날 때 자동으로 생성됩니다. 웹 페이지에 표시되는 내용이 화면에 모두 보이지 않아 추가적인 내용을 볼 필요가 있을 때, 브라우저는 스크롤바를 생성하여 사용자가 스크롤하여 추가 콘텐츠에 접근할 수 있도록 합니다.

또한, 요소 내의 콘텐츠가 요소의 크기를 초과하는 경우에도 스크롤바를 생성할 수 있습니다. 이렇게 하면 사용자가 요소 내의 모든 콘텐츠를 스크롤하여 확인할 수 있습니다.

스크롤바 스타일을 삭제하는 이유

웹브라우저가 지원하는 기본 디자인과 커스텀 디자인이 어우러지지 않거나 브라우저 및 운영 체제에 따른 미세한 결함들로 특정 디자인을 유지하기 어려워 스타일을 없애거나 변경할 수 있습니다.

또, 모바일 기기에서는 공간이 제한되어 있어 기본 스크롤바를 감추고 사용자 정의된 터치 스크롤 인터페이스로 대체하는 것이 더 나은 사용자 경험을 제공할 수 있기 때문입니다.

CSS로 스크롤바 스타일 삭제하는 방법

 

/* 기본 스크롤바 숨기기 */
::-webkit-scrollbar {
    display: none; /* Safari 및 Chrome 등 Webkit 기반 브라우저 */
}
  
/* Firefox용 기본 스크롤바 숨기기 */
html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

 

 

이렇게 스크롤바(scrollbar) 스타일 제거하는 방법에 대해서 알아보았습니다.

 

 

 

초보자를 위한 Safari 브라우저 개발자 도구 설정 방법

 

[git] README.md 파일 작성시, Markdown 문법(Syntax) 사용법

 

[Javascript] 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자

 

[Utility] Snipaste - 무료 캡쳐 도구, 핀(Pin) 고정, 클립보드(Clipboard), 색상 추출(Color Picker)

 

[CSS] SCSS를 활용한 동적 Spinner 애니메이션 만들기