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

 

코드

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

 

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

 

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

 

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

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

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

 

 

 

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

 

스크롤바 thumb 부분 높이 조절이 안될 때 

질문

 

해당 문제는 적용한 영역의 스크롤 길이가 짧아 높이가 조절이 안될 수 있습니다.

 

영역::-webkit-scrollbar-thumb {
  height: 95%;
}

thumb의 길이를 조절하는 부분은 min-height가 아닌 max-height로 적용된다고 생각하는 것이 해당 문제가 발생한 원인을 이해하는데 도움이 될 것 같습니다.

 

즉 현재 가능한 스크롤 영역바에서 더 작아지지는 못합니다.

 

만약 문제가 위와 같다면 해당 부분에 아래와 같은 코드를 적용해 길이가 늘어나는지 확인하는 것도 하나의 방법입니다.