[CSS] 스크롤바(scrollbar)를 디자인 하기



스크롤바(scrollbar)를 디자인 하기

스크롤바 스타일에 관한 웹표준은 존재하지 않는다고 합니다.

다만 wekbit 브라우저(크롬, 사파리, 오페라)에서는 가상요소를 사용하여 스타일을 적용할 수 있다고 합니다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 250px;
        height: 140px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim modi in
      exercitationem explicabo, at rem officia autem non porro soluta dolorum
      officiis ipsa repellat, laudantium ea unde labore, temporibus quas?Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Eveniet eius totam
      quam pariatur ratione, in voluptatem dignissimos laboriosam sint aut!
      Repudiandae consectetur odit quo corrupti quidem perferendis aut dolores
      quis?Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nam
      optio dolore recusandae fuga voluptatibus. Ea quam deserunt consectetur
      quo aut eligendi, molestiae incidunt molestias ullam? Repellendus ratione
      repellat
    </div>
  </body>
</html>

스타일이 없는 스크롤바 라면 위와 같은 그림일겁니다.

스크롤을 다루기 위해서는 관련된 가상 요소에 스타일을 입혀주면 됩니다.

몇가지 가상요소가 더 있지만 주로 아래 세가지면 충분합니다.(chrome 기준)

  • ::webkit-scrollbar : 스크롤바 전체
  • ::webkit-scrollbar-thumb : 스크롤 막대
  • ::webkit-scrollbar-track : 스크롤 막대 외부

각각 스크롤 영역 전체와, 막대(thumb), 여백(track)을 의미합니다.

::webkit-scrollbar - 수평방향의 스크롤인 경우 height을 지정

  • 길이를 10px로 지정하고 눈으로 확인하기 위해 임시로 검은색으로 지정.
  .container {
    width: 250px;
    height: 140px;
    overflow: auto;
  }
  .container::-webkit-scrollbar {
    width: 10px;
    background-color: black;
  }


  • 검은색을 지운 뒤, 막대(thumb)와 여백(track)에 각각 색상을 설정하겠습니다.
  .container {
    width: 250px;
    height: 140px;
    overflow: auto;
  }
  .container::-webkit-scrollbar {
    width: 10px;
  }
  .container::-webkit-scrollbar-thumb {
    background-color: #2f3542;
  }
  .container::-webkit-scrollbar-track {
    background-color: grey;
  }


border-radius와 box-shadow를 활용

  .container {
    width: 250px;
    height: 140px;
    overflow: auto;
  }
  .container::-webkit-scrollbar {
    width: 10px;
  }
  .container::-webkit-scrollbar-thumb {
    background-color: #2f3542;
    border-radius: 10px;
  }
  .container::-webkit-scrollbar-track {
    background-color: grey;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
  }


  • thumb와 track사이에 공간(padding)을 주고 싶을 때는 thumb의 background-clip을 padding-box로 주고 border의 색상을 transparent(투명)으로 조절하면 됩니다.

  • ※padding과 margin은 적용되지 않습니다.

  .container {
    width: 250px;
    height: 140px;
    overflow: auto;
  }
  .container::-webkit-scrollbar {
    width: 10px;
  }
  .container::-webkit-scrollbar-thumb {
    background-color: #2f3542;
    border-radius: 10px;
    background-clip: padding-box;
    border: 2px solid transparent;
  }
  .container::-webkit-scrollbar-track {
    background-color: grey;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
  }


Reference