CSS로 사용자 정의 스크롤바 만들기: 종합 가이드-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS로 사용자 정의 스크롤바 만들기: 종합 가이드

Barbara Streisand

Nov 01, 2024 am 06:07 AM

Creating Custom Scrollbars with CSS: A Comprehensive Guide

개발자는 최신 웹 브라우저를 사용하여 CSS를 사용하여 스크롤 막대의 모양을 사용자 정의할 수 있으므로 기능을 유지하면서 웹 애플리케이션의 시각적 매력을 향상시킬 수 있습니다. 이 가이드에서는 브라우저 간 호환성을 갖춘 사용자 정의 스크롤바를 구현하는 방법을 살펴봅니다.

기본 설정

먼저 사용자 정의 스크롤바를 포함할 컨테이너를 설정해 보겠습니다.

<div class="scrollbar-container">
  <h3>Visible custom scrollbar</h3>
  <p>
    <!-- Content that creates scrollable overflow -->
  </p>
</div>

로그인 후 복사

컨테이너 스타일링

스크롤 가능한 컨테이너에는 특정 크기와 오버플로 속성이 필요합니다.

.scrollbar-container {
  height: 50%;           /* Fixed height to enable scrolling */
  width: 50%;           /* Container width */
  margin: 0 auto;       /* Center the container */
  overflow: auto;       /* Enable scrolling */
  padding: 1rem;        /* Internal spacing */
}

로그인 후 복사

크로스 브라우저 구현

WebKit 브라우저(Chrome, Safari, Edge)

WebKit 기반 브라우저의 경우 ::-webkit-scrollbar 의사 요소를 사용합니다.

.scrollbar-container::-webkit-scrollbar {
  width: 4px;                    /* Width of the scrollbar */
  background-color: white;       /* Background color */
  border-radius: 100vw;         /* Rounded corners */
}

.scrollbar-container::-webkit-scrollbar-track {
  background: white;            /* Track color */
  border-radius: 100vw;        /* Rounded corners for track */
}

.scrollbar-container::-webkit-scrollbar-thumb {
  background: plum;            /* Scrollbar thumb color */
  border-radius: 100vw;       /* Rounded corners for thumb */
}

로그인 후 복사

파이어폭스

Firefox에서는 스크롤바 너비 및 스크롤바 색상 속성을 사용하는 다른 접근 방식이 필요합니다.

@-moz-document url-prefix() {
  .scrollbar-container {
    scrollbar-width: thin;           /* Width of the scrollbar */
    scrollbar-color: fuchsia white;  /* thumb and track colors */
  }  
}

로그인 후 복사

디자인 고려 사항

이 구현에는 여러 가지 신중한 디자인 선택이 포함됩니다.

테두리 반경: 100vw 값은 트랙과 썸 모두에 대해 완벽하게 둥근 모서리를 만듭니다.
최소 너비: 4픽셀 너비는 스크롤 막대를 눈에 띄지 않게 유지합니다.
색상: 자두색/자홍색 엄지손가락이 있는 흰색 트랙은 시각적 매력을 유지하면서 좋은 대비를 제공합니다.
일관된 타이포그래피: 디자인은 더 나은 가독성을 위해 Rubik 글꼴군을 사용합니다.

@import url(https://fonts.googleapis.com/css2?family=Rubik);

로그인 후 복사

CSS 변수

일관적인 테마를 위해 CSS 변수를 사용하는 예:

:root {
  --primary-text-color: #222;
  --secondary-text-color: #fff;
  --primary-bg-color: #222;
  --secondary-bg-color: #fff;
  --tertiary-bg-color: #ddd;
}

로그인 후 복사