[css] 스크롤바(scrollbar) 모양(design, 디자인) 조정하는 샘플코드 (custom…)

By itpsolver | 9월 16, 2022

/*
 * 스크롤바 디자인 커스텀하는 코드
 *
 *  - 일단 antd table 내의 스크롤바를 가공해 보았음
 *  - webkit 계열에서만 사용할 수 있다고 함.
 */
/* 스크롤바 폭 */
.ant-table-body::-webkit-scrollbar {
  width: 8px;
  /* 여기서 height가 의미가 있나? */
}
/* 스크롤바에서 움직이는 부분 */
.ant-table-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 2px;
  background-color: #bbb;
  /* opacity를 사용하기도 하는 것 같다. */
}
/* 스크롤바 움직이는 길 */
.ant-table-body::-webkit-scrollbar-track {
  background-color: #eee;
}