[CSS] 스크롤 바 스타일

Frontend/Today I Learned

[CSS] 스크롤 바 스타일

joycie416 2024. 8. 13. 21:59

이번 게시글은 개인과제 중 표에 스크롤 바를 이쁘게 적용하기 위해 찾아보다가 잘 정리된 글이 있어 정리하게 되었다.

🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리

Custom Scrollbar 스타일링 유튜브 홈페이지를 보면 스크롤바가 일반 브라우저 스크롤바와는 달리 동그랗게 스타일링 되어 있음을 볼 수 있다. 이처럼 스크롤바 역시 다른 요소처럼 CSS 스타일링이

inpa.tistory.com

결론은... 웨일에서 기본적으로 제공하는 스타일처럼 overlay가 되도록하고 싶었는데, 단순한 구조로는 불가능할 것 같고, 외부 라이브러리를 사용해야 할 것 같다.

웨일에서 스크롤바의 기본 스타일은 아래와 같다. 오른쪽은 마우스가 가까이 있을 때 반응이다.

크롬에서 기본적으로 제공하는 스크롤바는 아래처럼 투박하다. 평소 웨일을 기본 브라우저로 사용해 눈치채지 못했는데, 스크롤바가 들어가는 여러 곳에서 보기에 좋지 않았다.

웨일

크롬

스크롤바와 관련된 스타일링도 alert, confirm 창처럼 제한적이다. 또한 css 스크롤바 관련 선택자들은 표준이 아니기 때문에 브라우저마다 차이가 있다. 본 글에서는 webkit 기반 브라우저(Chrome, Edge, Opera, Safari, iOS 브라우저)에서 사용할 수 있는 부분만 다루고자 한다.

스크롤바 구성

https://developer.chrome.com/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-1_856.png?hl=ko

스크롤바는 위와 같은 기본 구조를 가진다.

스크롤바 속성

`::-webkit-scrollbar` : 스크롤바 전체
`::-webkit-scrollbar-thumb` : 드래그 가능한 스크롤 막대
`::-webkit-scrollbar-track` : 스크롤바가 움직이는 경로
`::-webkit-scrollbar-button` : 스크롤바 이동 버튼
`::-webkit-scrollbar-track-piece` : 스크롤바가 위치하지 않은 경로
`::-webkit-scrollbar-corner` : 가로, 세로 스크롤바가 있을 때 두 스크롤바가 만나는 모서리
`::-webkit-resizer` : 요소 하단 모서리에 나타나는 크기 조정 핸들

기본적으로 1번을 포함해야 다른 속성들도 적용된다. 그렇지 않으면 브라우저 기본 스크롤바가 적용된다.

사용할 html, css는 다음과 같다.

<body>
  <div class="scroll box1">
    <h1>스크롤바<br>여백</h1>
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      In sagittis purus sit amet felis aliquam, at aliquam odio consequat.
      Morbi id faucibus turpis. Aenean risus mi,
      euismod vitae pulvinar vitae, ultricies vel dolor.
      Vivamus ac condimentum urna, sed condimentum orci.
      Mauris sed elit in lectus iaculis elementum id eget ante.
      Maecenas vulputate feugiat arcu, eu accumsan nisl pharetra eget.
      Vestibulum bibendum vehicula risus sed elementum.
      Duis porttitor sapien ut justo ultrices, vitae sollicitudin arcu lacinia.
      Aliquam volutpat elit non dui luctus efficitur.
    </div>
  </div>
</body>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.inner {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.484);
}

.scroll {
  width: 250px;
  height: 250px;
  margin: 20px;
  padding: 0px;

  border: 1px solid black;
  color: white;
  background: url(https://flexible.img.hani.co.kr/flexible/normal/970/777/imgdb/resize/2019/0926/00501881_20190926.JPG) no-repeat center;
  background-size: cover;

  overflow-y: scroll;
}

스크롤이 필요한 가장 바깥 부분에 .scroll 클래스를 적용하고, 구분을 위해 텍스트가 작성된 .inner div에 반투명한 배경색을 주었다.

크롬에서 확인한 결과는 다음과 같다.

(1) 스크롤바 폭을 8px로 좁히고 (2) track색을 하얀색으로 바꾸고 (3) 스크롤바 막대의 색을 검정색으로 바꿔보자.

.box1::-webkit-scrollbar {
  width: 8px;
}
.box1::-webkit-scrollbar-track {
  background-color: white;
}
.box1::-webkit-scrollbar-thumb {
  background-color: black;
}

여기서 이상한 점을 찾아보자.

정답은 padding에 표시된 영역이 스크롤바와 일치한다는 것이다. padding이 없다고 뜨지만 스크롤바가 padding으로 표시된다. css에서 padding: 0;으로 설정했음에도 불구하고 스크롤바라는 padding이 생긴다. 하지만 전체 사이즈는 250px*250px로 유지된다. 스크롤바 사이즈만큼 내부 영역이 좁혀진다. 내부 영역 크기를 일정 사이즈로 유지하고 싶다면 스크롤바 폭도 고려하자.

`::-webkit-scrollbar-thumb`

스크롤 막대를 조금 꾸며보자.

(1) 주황색 계열의 2px 테두리를 주고 (2) 모서리를 둥글게 바꿔보자. (테두리가 잘 보이도록 스크롤바 폭을 15px로 늘려주었다.)

`::-webkit-scrollbar-thumb:hover`

스크롤 막대에 커서를 올리면 전체가 회색으로 변하도록 해보자.

.box1::-webkit-scrollbar-thumb:hover {
  background-color: gray;
  border: none;
}

`::-webkit-scrollbar-track:hover`

track도 thumb과 마찬가지로 꾸며줄 수 있다. 기본 배경색을 투명하게 만들고 커서가 올라가면 살짝 하얗게 변하도록 했다.

.box1::-webkit-scrollbar-track {
  background-color: transparent;
}
.box1::-webkit-scrollbar-track:hover {
  background-color: rgba(255, 255, 255, 0.393);
}

track도 thumb처럼 border-radius 속성을 적용할 수 있다.

.box1::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 12px;
}

`::-webkit-scrollbar-button`

스크롤바의 이동 버튼은 요즘 잘 사용되지 않고 있다. 미관상에도 보기 좋지 않아 많이들 없애는 추세이다. 스크롤바 버튼은 첫번째 예시 사진처럼 생겼다.

스크롤바 가상 클래스 선택자

:horizontal - 수평 방향을 포함하는 모든 스크롤바 기능에 적용
:vertical - 세로 방향 스크롤바
:decrement - 뷰의 위치가 감소할지 여부 (수직 스크롤바의 위쪽, 수평 스크롤바의 왼쪽).
:increment - 뷰의 위치가 증가할지 여부 (수직 스크롤바의 아래쪽, 수평 스크롤바의 오른쪽).
:start - 객체가 스크롤바 track 앞에 배치될지 여부
:end - 객체가 스크롤바 track 뒤에 배치되는지 여부
:single-button - 단일 버튼이 스크롤바 트랙 위와 아래에 나타날지 여부 (세로 스크롤 막대의 위/아래 버튼과 가로 스크
롤 막대의 왼쪽 및 오른쪽 버튼)
:double-button - 버튼 그룹이 스크롤바 트랙 위와 아래에 나타날지 여부 (세로 스크롤 막대의 위/아래 버튼과 가로 스크롤 막대의 왼쪽 및 오른쪽 버튼)
:no-button - 스크롤바의 방향에 따라 버튼이 스크롤바 트랙 위, 아래 또는 옆에 나타날지 여부
:corner-present - 스크롤바 모서리가 있는지 여부

이와 관련된 다른 예시는 링크에서 살펴보고 스크롤바 버튼을 이용해 스크롤바 시작과 끝 부분에 여백을 주는 방법을 알아보자.

`::-webkit-scrollbar-button`와 가상 클래스를 적용하면 버튼의 작용은 하지 않지만 빈 공간을 만들 수 있다. 이 때 필요한 것은 상단에 고정된 헤더이다. 스크롤바가 적용된 요소보다 z-index가 크면 button을 클릭할 수 없어 공간을 준 것 처럼 보인다.

.box1::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
  height: 30px;
  background-color: yellow;
}
.box1::-webkit-scrollbar-button:vertical:start:increment {
  display: block;
  height: 30px;
  background-color: green;
}

상단에 60px짜리 헤더가 고정되어 있다면 노란색, 초록색 버튼은 보이지 않을 것이다. 현재 상태에서 노란색 버튼을 누르면 스크롤이 위로 올라가고, 초록색 버튼을 누르면 아래로 내려간다.

또한 `:start`대신 `:end`를 사용하면 스크롤바 아래에 버튼을 추가할 수 있다.

스크롤바 숨기기

마지막으로 스크롤할 수 있지만 스크롤바를 보이지 않게 하려면 아래처럼 `display: none`을 적용하면 된다.

.box1::-webkit-scrollbar {
  display: none;
}

작성된 css는 아래 더보기에 있다.

.inner {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.484);
}

.scroll {
  width: 250px;
  height: 250px;
  margin: 20px;
  padding: 0px;

  border: 1px solid black;
  color: white;
  background: url(https://flexible.img.hani.co.kr/flexible/normal/970/777/imgdb/resize/2019/0926/00501881_20190926.JPG) no-repeat center;
  background-size: cover;


  overflow-y: scroll;
}

.box1::-webkit-scrollbar {
  /* display: none; */
  width: 15px;
}
.box1::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 12px;
}
.box1::-webkit-scrollbar-track:hover {
  background-color: rgba(255, 255, 255, 0.393);
}
.box1::-webkit-scrollbar-thumb {
  background: black;
  border: 2px solid #9b6a2f;
  border-radius: 12px 12px 12px 12px;
}
.box1::-webkit-scrollbar-thumb:hover {
  background-color: gray;
  border: none;
}
.box1::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
  height: 30px;
  background-color: yellow;
}
.box1::-webkit-scrollbar-button:vertical:start:increment {
  display: block;
  height: 30px;
  background-color: green;
}

더 많은 정보는 아래 참고 링크를 살펴보자!

🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리

inpa.tistory.com

CSS 스크롤바(Scrollbars) 커스텀 스타일링 - 코딩에브리바디

스크롤바(Scrollbars)를 원하는 디자인으로 스타일하는 방법에 대해 알아보겠습니다. CSS를 적용하면 나만의 스타일이 적용된 스크롤바를 디자인할 수 있습니다.

codingeverybody.kr

또한 크롬에서 스크롤바와 관련한 문서를 제공해주어 이 링크도 공유하고 마치겠다.

스크롤바 스타일 지정 | CSS and UI | Chrome for Developers

`scrollbar-width` 및 `scrollbar-color` 속성을 사용하여 스크롤바의 스타일을 지정합니다.

developer.chrome.com

'Frontend > Today I Learned' 카테고리의 다른 글

[JS] 이벤트 겹쳤을 때 막는 방법 (+ 이벤트 캡처링, 버블링) (0)	2024.08.23
[JS, redux] Redux 소개 및 기본 사용법 (0)	2024.08.19
[React] Hooks - useState, useEffect, useRef (0)	2024.08.16
[JS] Module 기초 정리 (0)	2024.08.08
[git] 자주 사용하는 기초적인 git 명령어 정리 (1)	2024.08.07

현재글[CSS] 스크롤 바 스타일

joycie416 님의 블로그

내용 중에 오류가 있다면 알려주세요!

typeScript, 협업, Redux, 클로저, Zustand, git명령어, supabase, TanstackQuery, 카카오맵, Next.js, JavaScript, REACT, 프로그래머스, CSS, jotai, tailwindcss, recoil, API, git, 테스팅,

Today :
Yesterday :

joycie416 님의 블로그