스크롤 디자인 변경하기_CSS

Mac과 윈도우는 기본 스크롤 디자인이 다르다.

(윈도우 스크롤 바 너무 못생겼다...)

 

따라서 스크롤 디자인을 변경하려면 어떻게 해야 할까?

---

우선 -webkit이라는 친구를 이용해주면 된다.

 

---

webkit이란?

웹킷 (영어: WebKit)은 웹 브라우저 를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크 이다.

원래는 Mac OS 10의 사파리 웹 브라우저 엔진으로 사용하기 위해 컨커러 브라우저의 KHTML 소프트웨어 라이브러리 에서 가져온 것이었으나 지금은 옴니웹, 시이라, 아로라, 미도리, 유즈블, iCab, 어도비 통합 런타임, 휴대 전화 (아이폰 포함), 노키아의 Series 60 브라우저, 구글의 안드로이드 플랫폼에 사용되고 있다.

 

그냥 "브라우저에서 제공하는 프레임워크"라고 기억하면 될 것 같다.

---

 

 

먼저 총 3가지 속성을 CSS에 넣어주면 된다.

webkit-scrollbar

webkit-scrollbar-thumb

webkit-scrollbar-track

/* scroll 디자인 */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-thumb {
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 15px;
  border-width: 4px;
  border-color: transparent;
}
::-webkit-scrollbar-track {
  background-color: transparent;
  box-shadow: transparent 0 0 0 inset;
  border: 0;
}
/* https://codingbroker.tistory.com/66 */

 

자세한건 해당 블로그를 참고하면 좋을 듯 하다.

 

https://codingbroker.tistory.com/66

[HTML, CSS] 스크롤바 스타일(디자인)하는 방법 - webkit-scrollbar