사용자 정의 스크롤바 스타일
YouTube 홈페이지를 보면 일반 브라우저 스크롤바와 달리 스크롤바가 원형임을 알 수 있습니다.
마찬가지로 스크롤 막대는 다른 요소와 마찬가지로 CSS로 스타일을 지정하여 사이트를 돋보이게 하여 방문자가 기억하기 쉽게 만들 수 있습니다.
그러나 스크롤바 요소는 웹 페이지 콘텐츠가 아닌 브라우저 내부의 인터페이스로 간주되기 때문에 일반적으로 css를 사용할 때 제한되는 기능이 많습니다.
브라우저의 경고 창 스타일을 지정할 수 없는 것과 같습니다.
즉, css를 사용하여 브라우저 스크롤 막대의 색상이나 두께를 변경할 수 있지만 다른 복잡한 스타일에 대해서만 가능합니다.
CSS 스크롤바와 관련된 선택자에 특별한 주의를 기울여야 합니다.
표준이 아니기 때문에 구문은 브라우저마다 다릅니다.
크게 두 가지 형태로 나눌 수 있습니다.
WebKit 기반 브라우저(크롬, 엣지, 오페라, 사파리, iOS 브라우저) 그리고 즉그리고 파이어폭스 브라우저에.
웹킷 브라우저 스크롤바 속성
- ::-웹킷-스크롤바 : 모두 스크롤
- ::-웹킷-스크롤바-썸네일 : 드래그 가능한 스크롤 막대
- ::-웹킷-스크롤바-트랙 : 스크롤바 트랙(영역 스크롤 이동/스크롤 진행률 표시줄)
- ::-웹킷-스크롤바-버튼 : 스크롤바 방향 버튼(= 위/아래 화살표)
- ::-웹킷-스크롤바-트랙-피스 : 스크롤 핸들 막대 부분을 제외한 스크롤 진행률 막대의 나머지 빈 공간.
- ::-웹킷-스크롤바-코너 : 가로/세로 스크롤바 교차점의 스크롤바 아래쪽 가장자리
- ::-웹킷 크기 조정기 : 요소의 아래쪽 가장자리에 나타나는 핸들을 조정합니다.
::-웹킷-스크롤바 셀렉터의 경우 IE 및 Firefox를 포함하지 않음 주요 최신 브라우저 모든 지원하는 것으로 간주됩니다.
사람들이 가장 많이 사용하는 브라우저를 꼽으라면 크롬, 엣지, 웨일이 될 것이므로 스크롤바의 스타일을 지정해야 한다면 가능하면 이 속성을 사용하면 된다.
/* Chrome, Whale, Edge */
/* 스크롤바 전체 기본 꾸미기 */
body::-webkit-scrollbar {
...
}
/* 스크롤바 막대 꾸미기 */
body::-webkit-scrollbar-thumb {
...
}
/* 스크롤바 트랙 꾸미기 */
body::-webkit-scrollbar-track {
...
}Firefox 스크롤바 속성
Webkit과 달리 Mozilla Firefox에서는 아래와 같이 두 가지 스타일 속성만 설정할 수 있습니다.
- 스크롤바 너비: 스크롤바 크기 조정(자동, 없음, 가늘게)
- 스크롤바 색상: 스크롤 막대의 Thumb 및 Track 스타일 설정
/* Firefox */
body {
scrollbar-width: thin;
scrollbar-color: black white; /* 검은색 Thumb 와 흰색 Track */
}IE 브라우저 스크롤 막대 속성
Internet Explorer 브라우저는 더 제한적입니다.
대부분의 값과 크기는 조정할 수 없으며 단순한 색상 변경만 가능합니다.
/* IE */
body{
scrollbar-base-color: #000;
scrollbar-face-color: #000;
scrollbar-3dlight-color: #000;
scrollbar-highlight-color: #000;
scrollbar-track-color: #000;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #000;
scrollbar-dark-shadow-color: #000;
}웹킷 스크롤바 속성 정리
처음 7개의 스크롤바 속성을 살펴보면 매우 어렵고 난해합니다.
그럼 주요 속성 몇 가지를 단계별로 정리하여 사용 방법을 알아보도록 하겠습니다.
::-웹킷-스크롤바
이것은 사용자 정의 스크롤 막대 스타일의 기본 속성입니다.
이 설정이 없으면 다른 모든 것이 비활성화됩니다.
/* 스크롤바 전체 영역 */
::-webkit-scrollbar {
width: 10px; /* 세로축 스크롤바 폭 너비 */
height: 20px; /* 가로축 스크롤바 폭 너비 */
}요소 영역이 스크롤 기능을 사용해야 함을 지정하는 것을 잊지 마십시오.
div {
overflow-x: scroll; /* 가로 스크롤 사용 */
overflow-y: scroll; /* 세로 스크롤 사용 */
}
::-웹킷-스크롤바-썸네일
마우스와 함께 움직이는 스크롤바 꾸미기
/* 스크롤바 막대 */
::-webkit-scrollbar-thumb {
background: #e89a3e; /* 스크롤바 막대 색상 */
border: 2px solid #9b6a2f; /* 스크롤바 막대 테두리 설정 */
border-radius: 12px 12px 12px 12px;
}또한 일반 CSS 가상 선택기 : 방황하다 결합하여 스크롤 막대에서 커서를 놓았을 때 색상을 변경할 수도 있습니다.
::-webkit-scrollbar-thumb:hover {
background-color:#a0a0a5;
}
::-웹킷-스크롤바-트랙
스크롤바 이동 영역 뒤의 배경을 장식합니다.
/* 스크롤이 움직이는 뒷 배경 */
::-webkit-scrollbar-track {
background: #9b6a2f; /* 스크롤바 뒷 배경 색상 */
}다음 예제는 위에서 배운 내용을 보여줍니다.
::-웹킷-스크롤바 , ::-웹킷-스크롤바-썸네일 ::-웹킷-스크롤바-트랙 속성만 사용하여 스타일이 지정되는 사용자 지정 스크롤 막대입니다.
대부분의 경우 위의 세 가지 속성만 사용하여 스타일을 지정할 수 있습니다.
펜을 봐 스크롤바-CSS-2 barzz12를 통해 (@inpaSkyrim) 존재하다 코드 펜.
::-웹킷-스크롤바-버튼
기본 브라우저 스크롤바의 위쪽 및 아래쪽 화살표 버튼. 보통 스크롤바를 꾸밀 때 디자인적으로 별로 좋지 않아서 숨기는 경향이 있습니다.
스크롤바 의사 클래스 선택기 유형
다음 속성은 주로 scrollbar-button 및 scrollbar-track-piece의 가상 선택기로 사용됩니다.
가상 선택기로 수직 또는 수평 스크롤 바, 첫 번째 버튼 또는 두 번째 버튼을 선택할 때 사용한다고 볼 수 있습니다.
그러나 더 복잡하고 실제로는 거의 사용되지 않으므로 이러한 선택자가 있는지 대략적으로 알아보는 것이 좋습니다.
- :수평의 – 가로 방향을 포함한 모든 스크롤바 기능과 함께 작동
- :수직의 – 세로 스크롤 막대
- : 감소 – 뷰의 위치를 감소시켜야 하는지 여부(수직 스크롤바의 경우 상단, 수평 스크롤바의 경우 왼쪽).
- : 증분 – 보기의 위치를 증가시켜야 하는지 여부(수직 스크롤바는 아래, 가로 스크롤바는 오른쪽).
- :시작 – 객체가 스크롤 막대 썸 앞에 놓일지 여부
- :끝 – 개체가 스크롤 막대 썸 뒤에 배치되는지 여부
- : 싱글 버튼 – 개별 버튼이 스크롤바 트랙 위와 아래에 표시되는지 여부 (세로 스크롤 막대의 위/아래 버튼과 가로 스크롤 막대의 왼쪽 및 오른쪽 버튼)
- : 더블 버튼 – 버튼 그룹이 스크롤바 트랙의 위와 아래에 표시되는지 여부(세로 스크롤바의 위/아래 버튼 및 가로 스크롤바의 왼쪽 및 오른쪽 버튼)
- : 버튼 없음 – 스크롤바의 방향에 따라 버튼이 스크롤바 트랙 위, 아래 또는 옆에 표시되는지 여부
- : 코너 선물 – 스크롤바 코너 유무
/* 세로 스크롤바의 단일 화살표 버튼 */
::-webkit-scrollbar-button:vertical:single-button {
/* single button styling */
background: red;
}
/* 세로 가로 스크롤바의 더블 화살표 버튼 */
::-webkit-scrollbar-button:double-button {
/* double button styling */
}
/* 상하 방향 스크롤바 화살표 버튼 */
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:vertical:decrement {
}
/* 좌우 방향 스크롤바 화살표 버튼 */
::-webkit-scrollbar-button:horizontal:increment,
::-webkit-scrollbar-button:horizontal:decrement {
}
::-webkit-scrollbar-button:start {
background-color: red; /* 세로 방향의 이동 버튼 */
}
::-webkit-scrollbar-button:end {
background-color: orange; /* 가로 방향의 이동 버튼 */
}::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
/* 스크롤의 화살표가 포함된 영역 */
display:block;
height:8px;
background-color: #000;
}
스크롤 바 가상 교실 선택기 사용 사례
물론 이러한 복잡한 선택자를 어디에 사용해야 할지 혼란스럽고 혼란스러울 수 있지만 직접 디자인하고 사용하는 사람은 거의 없습니다.
그러나 이를 적용하여 파일 상단 탐색 모음에서 스크롤 막대 썸이 겹치는 것을 방지합니다.
스크롤바 상단 영역에 여백을 남겨야 하는 경우 이 버튼 영역을 사용하여 빈 공간을 할당하는 응용 프로그램이 가능합니다.
예를 들어 아래 이미지와 같이 섹션을 위로 이동하면 스크롤바가 위쪽 내비게이션 영역과 겹칠 수 있는 문제가 있습니다.
이는 사용자 사용성에 좋지 않기 때문에 스크롤바 상단 영역의 기준점을 낮추기 위해 투명한 영역을 만들어야 합니다.
이때 투명한 버튼 영역을 생성하면 문제를 극복할 수 있다.
/* 스크롤바 트랙 위쪽 여백 공간 주기 위해서 */
.sidebar.close > .copy-sub > .sub-menu::-webkit-scrollbar-button:vertical:start:decrement,
.sidebar.close > .copy-sub > .sub-menu::-webkit-scrollbar-button:vertical:start:increment {
display: block;
height: 25px;
}
/* 만일 스크롤바 트랙 아래쪽도 여백 공간을 주고 싶다면 ... */
.sidebar.close > .copy-sub > .sub-menu::-webkit-scrollbar-button:vertical:end:decrement {
display: block;
width: 25px;
}
스크롤 바 가상 교실 선택기 스타일
이 스크롤 막대 더미 선택기를 사용하여 스크롤 영역 화살표를 디자인하는 경우 다음과 같이 스타일을 지정할 수 있습니다.
/* Vertical Scrollbar (RIGHT SIDE) */
::-webkit-scrollbar-track:vertical {
background: -webkit-linear-gradient(180deg, #fff, #fff, #fff, #fff, rgba( 0, 0, 255, 0.5), rgba( 0, 0, 255, 0.5), rgba( 0, 0, 255, 0.5), #fff, #fff, #fff);
border-radius: 10px;
}
/* Horizontal Scrollbar (BOTTOM SIDE) */
::-webkit-scrollbar-track:horizontal {
background: -webkit-linear-gradient(90deg, #fff, #fff, #fff, #fff, rgba( 0, 0, 255, 0.5), rgba( 0, 0, 255, 0.5), rgba( 0, 0, 255, 0.5), #fff, #fff, #fff);
border-radius: 10px;
}
/* Scrollbar Thumb */
::-webkit-scrollbar-thumb {
background: rgba( 112, 178, 243, 0.75);
border-radius: 2em;
}
/* Horiontal Scrollbar button (TOP-RIGHT aKa START) */
::-webkit-scrollbar-button:horizontal:single-button:start {
position: absolute;
content: '';
border-bottom: 20px solid transparent;
border-right: 42px solid #7082f3;
border-left: 20px solid transparent;
border-top: 20px solid transparent;
}
/* Vertical Scrollbar button (BOTTOM-LEFT aKa START) */
::-webkit-scrollbar-button:vertical:single-button:start {
position: absolute;
content: '';
border-right: 20px solid transparent;
border-bottom: 62px solid #7082f3;
border-left: 20px solid transparent;
border-top: 20px solid transparent;
}
/* Horiontal Scrollbar button (BOTTOM-RIGHT aKa END) */
::-webkit-scrollbar-button:horizontal:single-button:end {
position: absolute;
overflow: hidden;
content: '';
border-bottom: 20px solid transparent;
border-left: 42px solid #7082f3;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
}
/* Vertical Scrollbar button (BOTTOM-RIGHT aKa END) */
::-webkit-scrollbar-button:vertical:single-button:end {
position: absolute;
overflow: hidden;
content: '';
border-bottom: 20px solid transparent;
border-top: 62px solid #7082f3;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}펜을 봐 스크롤 막대의 대화형 데모(*: -webkit 브라우저에만 해당) Kaushalya R. Mandaliya 작성(@kman) 존재하다 코드 펜.
::-웹킷-스크롤바-코너
세로 스크롤 막대와 가로 스크롤 막대가 교차하는 스크롤 막대의 오른쪽 하단 모서리입니다.
일반적으로 스크롤바를 스타일링할 때 숨기는 것을 선호합니다.
/* 상하+좌우 스크롤이 만나는 우측 하단의 코너 부분 */
::-webkit-scrollbar-corner {
background: transparent;
}관습 스크롤 바 애플리케이션
스크롤바를 숨기고 스크롤만 활성화
웹 사이트의 시각적 공간을 차지하는 스크롤 막대 UI가 마음에 들지 않으면 스크롤 기능을 유지하고 스크롤 막대를 숨길 수 있습니다.
::-webkit-scrollbar {
display: none;
}스크롤 막대 간격
스크롤바 트랙과 스크롤바 사이에 가로 여백을 제공하여 스크롤바가 영역 내에 위치하도록 디자인하고 싶습니다.
그러나 기본적으로 scrollbar 속성은 이익 또는 충전재 Attributes가 작동하지 않음 따라서 border 속성을 사용하여 여백을 구현할 수 있는 간접 스타일 방법이 필요합니다.
스크롤바 트랙의 색상을 테두리 색상과 일치시키고 내용을 다른 색상으로 설정하면 공백을 주는 효과를 얻을 수 있습니다.
/* 스크롤을 적용할 영역 */
.scroll{
...
background-color: rgba(0,0,0,0.8);
}
.box1::-webkit-scrollbar{
width: 20px;
}
/* 스크롤바 막대 설정*/
.box1::-webkit-scrollbar-thumb{
background-color: rgba(255,255,255,1);
border-radius: 10px;
border: 7px solid rgba(0,0,0,0.8); /* 스크롤을 적용할 영역 색깔과 border 색상을 똑같이 맞춘다 */
}
.box1::-webkit-scrollbar-track{
background-color: rgba(0,0,0,0); /* 스크롤바 뒷 배경을 투명 처리한다 */
}펜을 봐 스크롤바-CSS-1 barzz12를 통해 (@inpaSkyrim) 존재하다 코드 펜.
상단과 하단에 더 큰 여백을 원하신다면,
테두리 상단 너비늘리면 막대 스크롤 막대가 끊어집니다.
이때 위의::-웹킷-스크롤바-버튼속성의 스크롤 막대 의사 클래스 선택기를 사용해야 합니다.
스크롤 트랙을 숨기고 막대만 표시
예를 들어 홈페이지를 아래와 같이 헤더와 배너 이미지 영역으로 디자인했다면 오른쪽의 스크롤바 영역은 화면이 분리되고 부드럽지 않게 느껴질 것입니다.
이런 경우 위에서 본 스크롤바를 숨기고 스크롤링 기능만 사용하면 어느 정도 완화될 수 있지만 스크롤바를 숨기는 것은 사용자의 사용 편의성을 위한 좋은 방법이 아닙니다.
그리고 배너 부분은 이미지이므로 스크롤 영역의 배경색을 지정하여 숨기는 방법은 사용할 수 없습니다.
그래서 스크롤 바가 있으면 좋겠지만 배너 영역이 화면을 가득 채우는 느낌을 주기 위해 스크롤 트랙 영역을 제거합니다.
적용하면 아래 그림과 같이 청록색 스크롤바가 활성화되면서 스크롤 궤적이 사라지면서 배너가 화면에 꽉 차게 됩니다.
CSS 코드는 다음과 같습니다.
이때 본문의 overflow 속성은 overlay로 처리해야 합니다.
이렇게 하면 공간을 차지하지 않고 스크롤 막대가 콘텐츠 위에 그려집니다.
body {
overflow-y: overlay; /* 반드시 overlay 처리 */
}
::-webkit-scrollbar {
width: 14px;
height: 14px;
}
::-webkit-scrollbar-thumb {
outline: none;
border-radius: 10px;
border: 4px solid transparent;
box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.15);
}
::-webkit-scrollbar-thumb:hover {
border: 4px solid transparent;
box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.3);
}
::-webkit-scrollbar-track {
box-shadow: none;
background-color: transparent;
}최소 스크롤 높이 설정
본문이 길고 스크롤바의 높이가 짧으면 클릭하기 어려워 사용성이 떨어집니다.
이때 최소 높이 이것은 막대의 최소 높이를 지정하여 극복할 수 있습니다.
::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
border: 4px solid #f4f4f4;
min-height: 50px; /* 스크롤바 막대 최소 높이 */
}사용자 지정 스크롤바의 예
다음은 다양한 사용자 지정 스크롤 막대 스타일의 예입니다.
펜을 봐 크롬의 커스텀 스크롤바 매튜 리처드@MathieuRichard) 존재하다 코드 펜.
펜을 봐 CSS 스크롤바 고스트 라이더(@고스트 라이더) 존재하다 코드 펜.
펜을 봐 CSS로 스크롤바 사용자 정의 무하마드 아판(@afan_muhammad) 존재하다 코드 펜.
커스텀 스크롤바 메이커
아래의 GUI를 사용하면 직접 코딩하는 것보다 더 쉽게 맞춤형 스크롤바의 스타일을 지정할 수 있습니다.
커스텀 스크롤바 메이커
귀하의 웹사이트에 대한 사용자 정의 스크롤바를 만드는 간단한 도구….
codepen.io
사용자 정의 스크롤 막대 라이브러리
jQuery 사용자 정의 컨텐츠 스크롤바
좋은 일로 jQuery가 필요합니다.
대신 다양한 스크롤바 디자인을 얻을 수 있습니다.
jQuery 사용자 지정 콘텐츠 스크롤러 – malihu | 웹 디자인
2016년 7월 11일에 마지막으로 업데이트됨 원래 플러그인에서 malihu가 2010년 8월 1일에 게시했습니다.
고도로 사용자 정의 가능한 사용자 정의 스크롤바 jQuery 플러그인. 기능에는 수직 및/또는 수평 스크롤 막대, 조정 가능한 스크롤 모멘텀, 마우스 휠(jQue를 통해)이 포함됩니다.
manos.malihu.gr
사용자 정의 스크롤바 JavaScript 라이브러리
10개의 순수한 JavaScript 및 CSS 라이브러리 모음입니다.
10 최고의 사용자 지정 스크롤바 JavaScript 라이브러리(2023년 업데이트됨) – CSS 스크립트
기본 스크롤 막대를 대체하고 향상시키는 데 사용할 수 있는 10개의 JavaScript 및/또는 순수 CSS 라이브러리 목록입니다.
미리보기 및 다운로드를 클릭합니다.
www.cssscript.com
부드러운 스크롤 막대
몇 가지 CSS 속성과 JavaScript만 지원하는 브라우저에서 스크롤 막대 제거 인터렉티브스크롤을 정상적으로 처리하는 방법도 있습니다.
대표적인 예로 이 블록의 가로 스크롤 기능이나 이 라이브러리는 아래로 스크롤할 때 부드러운 애니메이션을 제공합니다.
하지만 스크롤링 동작 자체가 지속적으로 이벤트를 발생시키는 무거운 동작이기 때문에 자바스크립트로 스크롤링을 제어하는 방식은 성능상의 문제가 있을 수 있다.
GitHub – idiotWu/smooth-scrollbar: 사용자 지정 가능하고 확장 가능하며 성능이 뛰어난 JavaScript 기반 스크롤바 솔루션입니다.
사용자 지정 가능하고 확장 가능하며 성능이 뛰어난 JavaScript 기반 스크롤바 솔루션입니다.
– GitHub – idiotWu/smooth-scrollbar: 사용자 지정 가능하고 확장 가능하며 성능이 뛰어난 JavaScript 기반 스크롤바, 그래서…
github.com
# 인용하다
https://blog.esteetey.dev/make-your-website-stand-out-with-a-custom-scrollbar
https://ameblo.jp/personwritep/entry-12538186713.html