스크롤바 스타일링 하기(Reactjs, styled-components)

크롬 또는 여러 브라우저에서 제공되는 기본 스크롤바 모양을 변경할 수 있다.

스크롤바를 이런 느낌으로

CSS를 아래와 같이 변경해주면 된다.

::-webkit-scrollbar  {
 width:  12px;
}

::-webkit-scrollbar-thumb  {
background-color:  rgba(0,0,0,0.16);
border-radius:  10px;
background-clip:  padding-box;
border:  2px  solid  transparent;
}

::-webkit-scrollbar-track  {
background-color:  transparent;
border-radius:  10px;
box-shadow:  inset  0px  0px  5px  white;
}

 

border-radius를 주어서 원형 느낌을 주고, 스크롤바 thumb 색상을 좀 투명하게 변경하고

스크롤바 width를 조절하면 얄쌍한(?) 느낌의 스크롤바를 구현할 수 있다.