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

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

기본 설정

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

<div class="scrollbar-container">
  <h3 id="Visible-custom-scrollbar">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 */
  }  
}

디자인 고려 사항

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

1. 테두리 반경: 100vw 값은 트랙과 썸 모두에 대해 완벽하게 둥근 모서리를 만듭니다.
2. 최소 너비: 4픽셀 너비는 스크롤 막대를 눈에 띄지 않게 유지합니다.
3. 색상: 자두색/자홍색 엄지손가락이 있는 흰색 트랙은 시각적 매력을 유지하면서 좋은 대비를 제공합니다.
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;
}

브라우저 호환성

• WebKit 브라우저(Chrome, Safari, Edge): 세부적인 사용자 정의를 완벽하게 지원
• Firefox: 스크롤 막대 너비 및 스크롤 막대 색상을 사용한 단순화된 사용자 정의
• Internet Explorer: 사용자 정의 스크롤바를 지원하지 않습니다
• 레거시 Edge: 제한적 지원

모범 사례

1. 사용성 유지: 스크롤바의 가시성과 기능을 유지하세요
2. 일관된 스타일: 스크롤바 색상을 사이트 테마와 일치시키세요
3. 테스트: 다양한 브라우저에서 모양 확인
4. 반응형 디자인: 다양한 뷰포트 크기에서 스크롤바가 어떻게 나타나는지 고려

최종 결과

결론

사용자 정의 스크롤 막대는 기능을 유지하면서 웹 애플리케이션의 시각적 매력을 향상시킬 수 있습니다. 이러한 패턴을 따르고 브라우저 간 호환성을 고려하면 사용자에게 일관되고 매력적인 스크롤 경험을 제공할 수 있습니다.

위 내용은 CSS로 사용자 정의 스크롤바 만들기: 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!