[CSS] 스크롤바 스타일 커스텀하기

CSS를 통해 스크롤바 스타일을 커스텀하는 방법에 대해 알아보자.

---

스크롤바 스타일에 대한 웹표준은 존재하지 않으며 webkit 브라우저에 한해서 커스텀이 가능하며,

스크롤을 커스텀하는데 주로 아래 3가지를 사용한다.

• ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정
• ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정
• ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정

그 외에도 몇가지가 존재하는데 자세한것은 본문 하단에 참고 사이트를 확인해보고,

이제 저 3가지를 활용한 예제 코드를 살펴보자.

---

/* 스크롤바 설정*/
.box2::-webkit-scrollbar{
    width: 6px;
}

/* 스크롤바 막대 설정*/
.box2::-webkit-scrollbar-thumb{
    background: linear-gradient(#f64435, #ffe498);
    border-radius: 25px;
}

/* 스크롤바 뒷 배경 설정*/
.box2::-webkit-scrollbar-track{
    background-color: #575757;
}

 

▷ 결과

<div class="scroll box1">
  <h1>박스1</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div class="scroll box2">
  <h1>박스2</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

.scroll{
    display: inline-block;
    width: 150px;
    height: 250px;  
    padding: 20px;
    overflow-y: scroll;
    border: 1px solid black;
    box-sizing: border-box;
    color: white;
    font-family: 'Nanum Gothic';
    background-color: rgba(0,0,0,0.8);
}

/* 스크롤바 설정*/
.box1::-webkit-scrollbar{
    width: 10px;
}

/* 스크롤바 막대 설정*/
.box1::-webkit-scrollbar-thumb{
    background-color: rgba(255,255,255,1);
    /* 스크롤바 둥글게 설정    */
    border-radius: 10px;    
}

/* 스크롤바 뒷 배경 설정*/
.box1::-webkit-scrollbar-track{
    background-color: rgba(0,0,0,0);
}


/* 스크롤바 설정*/
.box2::-webkit-scrollbar{
    width: 6px;
}

/* 스크롤바 막대 설정*/
.box2::-webkit-scrollbar-thumb{
    background: linear-gradient(#f64435, #ffe498);
    border-radius: 25px;
}

/* 스크롤바 뒷 배경 설정*/
.box2::-webkit-scrollbar-track{
    background-color: #575757;
}

 

---

참고: https://developer.mozilla.org/ko/docs/Web/CSS/::-webkit-scrollbar

::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN