스크롤바의 기본 디자인은 회색바의 올드한 느낌이 물씬나는 디자인이다. 모바일이 대세이지만 스크롤바에 커스텀 디자인을 입혀서 웹사이트를 더욱 고급진 모습으로 보일 수 있게 한다는 점은 디자이너의 창의성을 더욱 발휘할 수 있는 좋은 방법이다.
스크롤바는 윈도우, 맥과 같이 OS에 따라서 디자인이 다르다. 하지만 커스텀 디자인을 한다면 모든 브라우저에서 같은 디자인의 스크롤 바를 보여줄 수 있어서 일관성을 유지할 수 있다는 장점이 있다.
많은 사람들이 커스텀 스크롤 바에 대해 관심을 가지지만 적용하지 않고 끝나느 경우가 많다. 이유는 디자인 추가, 코드 추가 등의 업무가 늘어나기 때문..
새로운 것을 만드는 창의성을 발휘하기 위해서는 차별화로 스크롤바에 포인트를 주는 것도 하나의 방법이 아닐까?
커스텀 스크롤바 디자인
커스텀 스크롤바는 웹킷에서만 가능했기 때문에 Firefox와 IE에서는 지원하지 않았다. Firefox에서만 작동하는 구문을 사용하면 지원이 가능하지만 Webkit을 사용한 이전 버전을 먼저 살펴보자.
변경 전 구조
.section::-webkit-scrollbar {
width: 10px;
}
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}변경 후 구조
스크롤바 가로값
스크롤바의 가로값을 변경할 수 있으며 많이 사용하는 값은 'auto'와 'thin'이다. 아쉽지만 웹킷 구문에서는 숫자로 값을 정할 수 없다.
.section {
scrollbar-width: thin;
}스크롤바 색상
이 속성은 스크롤 track과 thumb에 함께 적용한다.
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}변경 후 구문은 간단하지만 제한적이다. 단색만 적용할 수 있어서 디자인 활용도가 떨어진다.
내가 원하는 커스텀 스크롤바
처음 커스터마이징을 하기 위해서는 어떻게 만들지를 먼저 생각해봐야한다.
모든 스크롤바에서 작동해야하나?
특정 섹션에만 적용해야하나?
변경 전 구조를 사용하면 특정 요소뿐 아니라 모든 스크롤이 가능한 요소에 적용된다.
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: darkgrey;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
하지만 특정한 부분에서만 보여주고 싶다면 선택자를 추가해야 한다.
.section::-webkit-scrollbar {
width: 10px;
}
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
새 구문의 경우도 동일하다. 하지만 전체적으로 같은 스타일을 원할 경우 <body>가 아닌 <html>에 해야 한다.
<body>에 적용하면 작동하지 않는다.
html {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}스크롤바 적용하기
둥근 스크롤바 만들기
.section::-webkit-scrollbar {
width: 16px;
}
.section::-webkit-scrollbar-track {
background-color: #e4e4e4;
border-radius: 100px;
}
.section::-webkit-scrollbar-thumb {
background-color: #d4aa70;
border-radius: 100px;
}
.section {
scrollbar-color: #D4AA70 #e4e4e4;
}
.section::-webkit-scrollbar-thumb {
background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);
box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
border-radius: 100px;
}See the Pen Custom Scrollbar - 2 by 이수연 (@llbitkbn-the-bashful) on CodePen.
스크롤바에 라인을 넣은 경우
See the Pen Custom Scrollbar - 3 by Ahmad Shadeed (@shadeed) on CodePen.
'IT' 카테고리의 다른 글
| 애플 아이폰 13 목업 디자인 포토샵, 스케치, 피그마 파일 공유! 구매하지말고 사용하자! (8) | 2021.10.06 |
|---|---|
| 포토샵과 사진만 있으면 간단하게 하는 오일 페인트 효과주기. 첨부파일 다운! (6) | 2021.10.06 |
| 애플 신제품 아이폰13 발표. 아이폰12 왜 샀지..? 혁신보다 성능 향상에 포커스를 맞췄다!(개인적 실망감 추가) (12) | 2021.09.15 |
| 맥북을 기다리는 1인에게 보내져온 애플 신제품 발표 초대장! (1) | 2021.09.09 |
| [Vue.js] 스크롤(터치) 업 / 다운 클래스(CSS) 추가 및 제거 이벤트 주는 방법 (0) | 2021.08.09 |
