MovieList 미션을 진행하면서 영화 상세 모달을 구현할 때에 줄거리가 길 경우 overflow : scroll로 처리하였다. 기본 스크롤 디자인이 마음에 들지 않아 스크롤 스타일링에 대하여 알아보고 적용하였다. 따라서 오늘은 ::-webkit-scrollbar를 사용하여 스크롤을 스타일링하는 방법에 대하여 공유해보려고 한다. 이 방법은 웹킷(WebKit) 브라우저(예: 크롬, 사파리)에서만 작동한다.
디자인 할 수 있는 영역들은 다음과 같다.
::-webkit-scrollbar— 전체 스크롤바.
::-webkit-scrollbar-button— 스크롤 막대의 버튼(한 번에 한 줄씩 스크롤하는 위쪽 및 아래쪽을 가리키는 화살표).
::-webkit-scrollbar:horizontal{}— 수평 스크롤바.
::-webkit-scrollbar-thumb— 드래그 가능한 스크롤 핸들.
::-webkit-scrollbar-track— 흰색 막대 위에 회색 막대가 있는 스크롤 막대의 트랙(진행률 막대)입니다.
::-webkit-scrollbar-track-piece— 핸들로 덮이지 않는 트랙 부분(진행률 표시줄).
::-webkit-scrollbar:vertical{}— 수직 스크롤바.
::-webkit-scrollbar-corner— 가로 및 세로 스크롤바가 모두 만나는 스크롤바의 하단 모서리. 이것은 종종 브라우저 창의 오른쪽 하단 모서리입니다.
::-webkit-resizer— 일부 요소의 하단 모서리에 나타나는 끌기 가능한 크기 조정 핸들입니다.
1. 기본 스타일 지정하기
먼저, 스크롤 기본 스타일을 지정할 수 있다. 다음은 ::-webkit-scrollbar를 사용하여 스크롤 바의 너비, 높이, 배경색 등의 스타일을 지정한 예시 코드이다.
/* 스크롤 바 전체에 대한 스타일 지정 */
::-webkit-scrollbar {
width: 8px; /* 스크롤 바의 너비 */
height: 8px; /* 스크롤 바의 높이 */
background-color: #f0f0f0; /* 스크롤 바의 배경색 */
}
/* 스크롤 바의 색상 지정 */
::-webkit-scrollbar-thumb {
background-color: #ff0000; /* 스크롤 바의 색상 */
}
/* 스크롤 바 호버 시 색상 지정 */
::-webkit-scrollbar-thumb:hover {
background-color: #ff8800; /* 스크롤 바의 색상 */
}
2. 수평 및 수직 스크롤 스타일 지정하기
스크롤 바의 방향에 따라 다른 스타일을 지정할 수 있다. 다음은 ::-webkit-scrollbar를 사용하여 수평 및 수직 스크롤 바에 대한 스타일을 지정한 예시 코드이다.
/* 수평 스크롤 바에 대한 스타일 지정 */
::-webkit-scrollbar-horizontal {
height: 12px; /* 스크롤 바의 높이 */
background-color: #f0f0f0; /* 스크롤 바의 배경색 */
}
/* 수직 스크롤 바에 대한 스타일 지정 */
::-webkit-scrollbar-vertical {
width: 12px; /* 스크롤 바의 너비 */
background-color: #f0f0f0; /* 스크롤 바의 배경색 */
}
3. 스크롤 버튼 스타일 지정하기
스크롤 버튼에 대한 스타일을 지정할 수 있다. 다음은 ::-webkit-scrollbar-button를 사용하여 스크롤 버튼에 대한 스타일을 지정한 예시 코드이다.
/* 스크롤 버튼에 대한 스타일 지정 */
::-webkit-scrollbar-button {
width: 0; /* 스크롤 버튼
참고 자료 : https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
chill~