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

 

textarea 등 스크롤바가 나타는 요소에 커스텀 적용하기

 

스크롤바 커스텀

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

 

body::-webkit-scrollbar {
    width: 8px; 
}

body::-webkit-scrollbar-thumb {
    height: 25%; 
    background: #0051ED;
    
    border-radius: 10px;
}

body::-webkit-scrollbar-track {
    background: #E8E8E8;
}

 

예시

See the Pen Untitled by seola (@seola-the-reactor) on CodePen.

 

 

 

***  scrollbar 커스텀 할 때에는, 맨 처음 ::-webkit-scrollbar 부터 순서대로 지정해줘야 합니다.
막대 스타일만을 변경하기 위해 scrollbar-thumb부터 적용시, 스타일 적용이 안될 수 있습니다.