[CSS] Scrollbar Custom

📝 스크롤바 스타일 커스텀(Scrollbar Style Custom)

스크롤바 스타일에 대한 웹표준은 존재하지 않습니다.
webkit 브라우저(크롬, 오페라, 사파리)에 한해서 가상요소를 사용하여 커스텀을 해줍니다.

스크롤바와 관련된 가상요소는 여러가지가 있지만 주로 사용하는 아래 3가지가 있습니다.

1. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정
2. ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정
3. ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 각 스크롤 영역 전체, 막대(thumb), 여백(track)을 뜻합니다.

작성된 코드로 확인해보겠습니다.

body::-webkit-scrollbar { 
  width: 10px; /* 세로축 스크롤바 길이 */ 
  height: 20px; /* 가로축 스크롤바 길이 */ 
} 
body::-webkit-scrollbar-track { 
  background-color: white; /*스크롤 바 배경 색상*/ 
} 
body::-webkit-scrollbar-thumb { 
  border-radius: 8px; 
  background-color: #6667AB; /*스크롤 바 색상*/ 
}

body 전체가 아니라 특정영역을 지정해서 사용할 수 있습니다.
특정영역::코드 로 작성하게 되면 지정된 특정영역에 스크롤바 커스텀이 가능합니다.