이 기사에서 우리는 스크롤바의 세계로 뛰어들 것입니다. 나는 그것이 너무 화려하게 들리지 않는다는 것을 압니다. 그러나 저를 믿으십시오. 잘 디자인된 페이지는 일치하는 스크롤 막대와 함께 사용됩니다. 구식 크롬 스크롤바는 그다지 적합하지 않습니다.
우리는 스크롤 막대의 핵심 세부 사항을 살펴본 다음 몇 가지 멋진 예를 살펴보겠습니다.
스크롤바의 구성요소
이것은 정말로 상쾌한 것입니다. 있다 바로 여기 CSS-Tricks에 대한 많은 게시물 CSS에서 사용자 지정 스크롤바 스타일을 지정할 때 자세히 설명합니다.
스크롤 막대의 스타일을 지정하려면 스크롤 막대의 구조를 잘 알고 있어야 합니다. 이 그림을 살펴보십시오.
여기서 염두에 두어야 할 두 가지 주요 구성 요소는 다음과 같습니다.
- XNUMXD덴탈의 선로 막대 아래의 배경입니다.
- XNUMXD덴탈의 무지 사용자가 클릭하고 드래그하는 부분입니다.
벤더 프리픽스를 사용하여 전체 스크롤바의 속성을 변경할 수 있습니다.::-webkit-scrollbar 선택자. 스크롤 막대에 고정 너비, 배경색, 둥근 모서리 등을 지정할 수 있습니다. 페이지의 기본 스크롤 막대를 사용자 지정하는 경우 다음을 사용할 수 있습니다. ::-webkit-scrollbar HTML 요소에서 직접:
html::-webkit-scrollbar {
/* Style away! */
}스크롤 상자를 사용자 지정하는 경우 overflow: scroll, 우리는 사용할 수 있습니다 ::-webkit-scrollbar 대신 해당 요소에 대해:
.element::-webkit-scrollbar {
/* Style away! */
}다음은 HTML 요소의 스크롤바가 빨간색 배경으로 넓어지도록 스타일을 지정하는 간단한 예입니다.
스크롤바의 썸이나 트랙만 변경하고 싶다면 어떻게 해야 할까요? 당신은 그것을 짐작했습니다 — 우리는 이 두 가지에 대해 특별한 접두사가 붙은 의사 요소를 가지고 있습니다. ::-webkit-scrollbar-thumb 와 ::-webkit-scrollbar-track, 각각. 다음은 이러한 모든 항목을 결합할 때 무엇이 가능한지에 대한 아이디어입니다.
충분히 닦으세요! 사용자 지정 스크롤 막대 스타일의 XNUMX단계를 보여주고 영감을 얻기 위해 웹에서 가져온 예제의 큰 쇼케이스를 열고 싶습니다.
심플하고 고급스러운 스크롤바
사용자 지정 스크롤 막대는 여전히 최소일 수 있습니다. 썸이나 트랙의 약간의 색상 변경 또는 배경의 약간의 가벼운 스타일링을 통해 모양을 미묘하게 변경하는 예제 그룹을 모았습니다.
보시다시피 스크롤바 스타일에 대해 미쳐버릴 필요가 없습니다. 전체 테마와 일치하는 스크롤바를 사용하여 전체 사용자 경험을 향상시키는 데 필요한 것은 미묘한 변경뿐입니다.
멋진 눈길을 끄는 스크롤바
하지만 인정합시다. 조금 과장하고 창의력을 발휘하는 것은 재미있습니다. 다음은 경우에 따라 "너무 많음"일 수 있지만 확실히 눈길을 끄는 이상하고 독특한 스크롤바입니다.
하나 더…
스크롤바를 기차 안에서 엄지손가락으로 돌리고 트랙을 추적하는 것은 어떻습니까!
