[CSS] 스크롤바 스타일 커스텀

- 스크롤바 커스텀

각 아래에 대한 CSS 코드를 추가해 주면 커스텀을 할 수 있다.

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

* 영역::코드로 적용 대상을 제한하여 사용할 수 있다.

See the Pen Untitled by 손지인 (@tlyifual-the-bold) on CodePen.

 

- CSS

body::-webkit-scrollbar {
    width: 15px;  /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb {
    height: 10%; /* 스크롤바의 길이 */
    background: #BA55D3; /* 스크롤바의 색상 */
    
    border-radius: 10px;
}

body::-webkit-scrollbar-track {
    background: rgba(88, 50, 120, .1);  /*스크롤바 뒷 배경 색상*/
}

 

- 참고로 IE(익스플로러) 환경에서는 적용이 안될 수 있다고 한다.

 
 

 

---

Reference
https://gurtn.tistory.com/120