230607) overflow auto/scrollbar 설정 시 스크롤 디자인 변경

overflow: scroll 로 css를 설정하게 되면 내부의 양과 외부 크기를 맞추어 스크롤을 만들어 준다

참 편리하고 좋은 기능이지만, 당연히도 기본적인 스크롤 디자인이기 때문에, 몇몇 사이트에는 적합하지 않을 가능성이 높다!

 

이럴 때에는 css로 아래사항을 변경해 주면 된다.

 

element::webkit-scrollbar

-> 스크롤바의 전체적인 사이즈, 배경색상등을 조정 가능하다

element::webkit-scrollbar-thumb

-> 스크롤바 중 현재 위치 바를 조정할 때 사용하면 된다.

 

.movie-info {
  overflow: auto;
}
/* 스크롤바를 주고자 하는 대상에 overflow:auto 또는 scroll 입력 */

.movie-info::-webkit-scrollbar {
  width: 5px;
  background-color: #eee;
}
/* 스크롤바 전체 디자인 속성 (옅은 회색) */

.movie-info::-webkit-scrollbar-thumb {
  background-color: #999;
}
/* 스크롤바 현재 위치 속성 (짙은 회색) */

(.movie-info에 제어를 원하는 element를 넣어 주면 된다!)

 

예를 들어 .css에 위와 같은 코드를 적용했을 경우, 아래와 같은 결과물이 나오게 된다.

 

참 쉽죠!?

오늘도 잘 해냈다!