[CSS3] 스크롤바 커스텀(Scrollbar Custom)

 

회사 업무를 진행하다

디자인된 화면과 어울리지 않는 스크롤바를 커스텀을 하였다.

차후 이 지식이 나에게 도움이 될 것 같아 글을 작성하였다

 

🎁 스크롤 바 커스텀을 진행하여 나만의 홈페이지를 완성시키자! 🎁

 

 

 

---

 

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

 

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

 

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

 

 

::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정

::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정

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