[CSS] 스크롤 바 스타일 적용하기

 

스크롤 바에 스타일을 적용하기 위한 CSS코드를 정리한다

 

webkit 브라우저 스크롤바 속성에는

• ::-webkit-scrollbar : 스크롤바 전체
• ::-webkit-scrollbar-thumb : 스크롤바 막대
• ::-webkit-scrollbar-track : 스크롤바 막대 외부
• ::-webkit-scrollbar-button : 스크롤바 방향 버튼 (위/아래 화살표)

등이 있다

 

이 속성들은 webkit 기반 브라우저인 크롬, 엣지, 오페라, 사파리에서 적용된다

 

.example::-webkit-scrollbar {
  /* 스크롤바 너비 */
  width: 12px;
}

.example::-webkit-scrollbar-thumb {
  height: 500px;
  /* 스크롤바의 색상 */
  background: rgba(111, 121, 122, 1);
  border-radius: 5px;
  /* padding이 적용 안되므로 border처리 */
  border-right: 4px solid white;
  border-left: 4px solid white;
}

.example::-webkit-scrollbar-track {
  /* 스크롤바 뒷 배경을 투명 처리 */
  background-color: rgba(0, 0, 0, 0);
}

 

위는 내가 작성한 css 코드이다

 

스크롤바에는 패딩이 먹지 않는다

따라서 스크롤바에 양옆 여백을 주기 위해서는 border를 만들어 그 색을 뒤랑 맞추어 마치 빈 공간처럼 만들어주어야 한다