[CSS] scrollbar css 수정 방법

스크롤바는 웹표준은 없으나, webkit browser 에 한해서 스타일을 적용할 수 있다.

스크롤을 다루기 위해서는 관련된 가상 요소에 스타일을 적용시키면 된다.

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

1. 가로 스크롤일 경우 height, 세로 스크롤일 경우 width 를 지정해주면 해당하는 스크롤의 너비를 지정할 수 있다.

   .test-wrapper::-webkit-scrollbar {
       width: 10px;
       background-color: #595959;
   }

2. 막대와 여백에 각각 css 를 적용시킬 수 있다.

   .test-wrapper::-webkit-scrollbar-thumb { //막대
       background-color: red;
   }
   .container::-webkit-scrollbar-track { //여백
       background-color: blue;
   }

3. 막대와 여백 사이 공간을 주고싶을 때는 padding 이나 margin 을 생각하지만 여기서는 적용되지 않는다.

   .container::-webkit-scrollbar-thumb {
       background-clip: padding-box;
       border: 2px solid transparent;
     }

위처럼 thumb 에 background-clip 을 padding-box 로 주고, border 색상을 투명으로 줘서 공간이 생긴것처럼 표현할 수 있다.