CSS로 스크롤바의 스타일을 지정하는 방법

소개

2018년 9월 W3C CSS Scrollbars는 CSS로 스크롤 막대의 모양을 사용자 지정하기 위한 사양을 정의했습니다.

2020년 현재 인터넷 사용자의 96%가 CSS 스크롤바 스타일을 지원하는 브라우저를 실행하고 있습니다. 그러나 Blink 및 WebKit과 Firefox 브라우저를 포함하려면 두 세트의 CSS 규칙을 작성해야 합니다.

이 자습서에서는 CSS를 사용하여 최신 브라우저를 지원하도록 스크롤 막대를 사용자 지정하는 방법을 배웁니다.

전제 조건

이 문서를 따라 하려면 다음이 필요합니다.

점잖은 저하의 개념에 익숙함.

Chrome, Edge 및 Safari에서 스크롤바 스타일 지정

현재 Chrome, Edge 및 Safari용 스타일 스크롤 막대는 공급업체 접두사 의사 요소 -webkit-scrollbar와 함께 사용할 수 있습니다.

다음은 ::-webkit-scrollbar, ::-webkit-scrollbar-track 및 ::webkit-scrollbar-thumb 를 사용하는 예입니다. 의사 요소:

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

다음은 이러한 CSS 규칙으로 생성된 스크롤 막대의 스크린샷입니다.

이 코드는 Chrome, Edge 및 Safari의 최신 릴리스에서 작동합니다.

안타깝게도 이 사양은 W3C에서 공식적으로 포기했으며 시간이 지남에 따라 더 이상 사용되지 않을 가능성이 높습니다.

Firefox의 스크롤바 스타일 지정

현재 Firefox용 스타일 스크롤 막대는 새로운 CSS 스크롤 막대와 함께 사용할 수 있습니다.

다음은 scrollbar-width 및 scrollbar-color 속성을 사용하는 예입니다.

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */ 
}

다음은 이러한 CSS 규칙으로 생성된 스크롤 막대의 스크린샷입니다.

이 사양은 스크롤 막대의 색상을 제어하기 위한 -webkit-scrollbar 사양과 일부 공통점을 공유합니다. 그러나 현재 "track thumb\에 대한 패딩 및 원형률 수정에 대한 지원은 없습니다.

미래에 대비한 스크롤바 스타일 구축

-webkit-scrollbar 및 CSS Scrollbars 사양을 모두 지원하는 방식으로 CSS를 작성할 수 있습니다.

다음은 scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-를 사용하는 예입니다. scrollbar-track, ::webkit-scrollbar-thumb:

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Blink 및 WebKit 브라우저는 인식하지 못하는 규칙을 무시하고 -webkit-scrollbar 규칙을 적용합니다. Firefox 브라우저는 인식하지 못하는 규칙을 무시하고 CSS Scrollbars 규칙을 적용합니다. Blink 및 WebKit 브라우저가 -webkit-scrollbar 사양을 완전히 사용하지 않으면 새로운 CSS Scrollbars 사양으로 정상적으로 대체됩니다.

결론

이 기사에서는 CSS를 사용하여 스크롤 막대의 스타일을 지정하고 이러한 스타일이 대부분의 최신 브라우저에서 인식되도록 하는 방법을 소개했습니다.

기본 스크롤 막대를 숨기고 JavaScript를 사용하여 높이와 스크롤 위치를 감지하여 스크롤 막대를 시뮬레이트할 수도 있습니다. 그러나 이러한 접근 방식은 관성 스크롤링(예: 트랙패드를 통해 스크롤할 때 동작 감소)과 같은 경험을 재현하는 데 한계가 있습니다.

CSS에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 CSS 주제 페이지를 확인하십시오.