스크롤바 스타일

🚨 클론 코딩 진행하다 스크롤바에 css를 주는 것을 발견했는데 이 내용을 어떻게 검색해야할지 몰라서 검색하는 부분이 더 오래 걸린 것 같다 ㅎㅎㅎ

::webkit-scrollbar : 스크롤바 전체
::webkit-scrollbar-thumb : 스크롤 막대
::webkit-scrollbar-track : 스크롤 막대 외부 ( 막대를 제외한)

스타일시트에서 내가 원하고자 하는 영역에 추가해주면 된다!

#promotion::-webkit-scrollbar {
    height: 2px;
    background-color: #d6d6d6;
}

#promotion::-webkit-scrollbar-thumb {
    background-color: black;

요렇게 만들 수 있다!
나는 별도로 track에 색을 주는게 아닌 스크롤바 전체에 색상을 주고 막대 부분만 다른 색이 표출될 수 있도록 설정했다.
또한, 나는 가로 스크롤이라서 스크롤바 크기를 height으로 지정했는데 만약 세로 스크롤이라면 width로 길이를 지정해주면 된다!

➕ 추가로!
track과 thumb의 크기를 다르게 해주고싶으면 여기서는 padding이나 margin이 적용되지 않아서 thumb의 background-clip을 padding-box로 설정하고 border색상을 transparent(투명)으로 조절하면 된다.

#promotion::-webkit-scrollbar-thumb {
    background-color: black;
    background-clip: padding-box;
    border: 4px solid transparent;
}