CSS를 사용하여 사용자 정의 스크롤 막대 만들기

3193 단어 tutorialscrollbarcsswebdev
저는 항상 맞춤형 스크롤바를 만드는 방법에 대해 배우는 데 관심이 있었고 마침내 성공했습니다.

먼저 스크롤바의 구성요소를 보여드리겠습니다. 스크롤 막대에는 썸과 트랙이 포함되어 있습니다. 썸은 드래그 가능한 스크롤 핸들이고 트랙은 전체 스크롤 막대 자체인 진행률 표시줄입니다.



스크롤바 너비

먼저 다음 의사 요소를 사용하여 스크롤 막대의 너비(수직 스크롤 막대의 너비 및 수평 스크롤 막대의 높이)를 정의합니다. ::-webkit-scrollbar
::--webkit-scrollbar {
    width: .6em;
}


스크롤바 트랙

그림자, 테두리 반경, 배경색으로 스크롤 막대의 스타일을 지정하고 의사 요소를 사용할 수 있습니다: ::-webkit-scrollbar-track
::--webkit-scrollbar-track {
    background-color: transparent;
}


스크롤바 썸

스크롤 막대 썸은 배경색, 그라데이션, 그림자, 테두리 반경으로 스타일을 지정할 수 있습니다. 이를 위해 의사 요소::-webkit-scrollbar-thumb를 사용합니다.

::--webkit-scrollbar-thumb {
    background-color: #e1d3cf;
    border-radius: 5px;
    border: .2em solid #25649a;
}


기타 의사 요소:::-webkit-scrollbar-button - 위쪽과 아래쪽을 가리키는 화살표.::-webkit-scrollbar-corner - 가로 스크롤 막대와 세로 스크롤 막대가 모두 만나는 스크롤 막대의 아래쪽 모서리입니다.

여기에서 codepen 데모를 볼 수 있고 그것을 가지고 놀 수 있습니다:



안타깝게도 이 방법은 Webkit 기반 브라우저에서만 작동합니다. Mozilla Firefox의 경우 scrollbar-color 및 scrollbar-width의 두 매개변수만 사용할 수 있으며 <html>가 아닌 <body> 요소에 적용해야 합니다.
scrollbar-width 값은 auto , inherit , initial , none , revert , thin 및 unset 입니다. 특정 숫자를 정의할 수 없습니다.
scrollbar-color를 사용하여 스크롤 막대 트랙과 썸의 색상을 쌍 값으로 정의합니다.

html {
   scrollbar-color: #e1d3cf #25649a;
   scrollbar-width: thin;
}


이 경우 그림자, 그라데이션 또는 둥근 모서리를 사용하여 스타일을 지정할 수 없습니다.

그게 다야! 🎉 읽어주셔서 감사합니다. 자세한 내용은 MDN 리소스를 확인하십시오.
자바 유형 비교
Appwrite + jQuery로 앱 빌드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage