CSS로 사용자 정의 스크롤 바를 만드는 방법

예, 주로 Chrome, Edge 및 Safari를 지원하는 WebKit Pseudo elements를 통해 사용자 정의 스크롤 바를 만들 수 있습니다. Firefox에는 스크롤 바 전형 및 스크롤 바 색상 속성이 필요하지만 IE와 같은 오래된 브라우저는이를 지원하지 않으며 기본 스타일에 의존해야합니다. 개발자는 ::-Webkit-Scrollbar, ::-WebKit-Scrollbar-Track 및 ::-WebKit-Scrollbar-Thumb과 같은 의사 요소를 통해 스크롤바 너비를 정의하고 배경 및 슬라이더 스타일을 추적 할 수 있습니다. 동시에 Firefox를 위해 Scrollbar-Color를 설정하여 크로스 브라우저 호환성을 달성하고 궁극적으로 현대식 브라우저에서 아름답고 정상적인 기능 맞춤형 스크롤 바를 달성하십시오.

CSS로 사용자 정의 스크롤 바를 만드는 것은 WebKit 기반 브라우저 (Chrome, Edge 및 Safari)에서 지원하는 의사 요소를 사용하여 간단합니다. Firefox 및 Internet Explorer는 CSS를 갖춘 스타일링 스크롤 바를 지원하거나 지원하지 않지만 대부분의 최신 브라우저는 WebKit 스크롤 바 속성을 허용합니다.

사용자 정의 스크롤 바를 만드는 방법은 다음과 같습니다.

1. webkit pseudo elements로 스크롤 바를 대상으로합니다

스크롤 바의 다른 부분을 스타일링하려면 다음 WebKit 특이 적 의사 요소를 사용하십시오.

• ::-webkit-scrollbar 전체 스크롤 바
• ::-webkit-scrollbar-track 스크롤 바의 트랙 (배경)
• ::-webkit-scrollbar-thumb 드래그 가능한 스크롤 핸들
• ::-webkit-scrollbar-corner 수평 및 수직 스크롤 바가 만나는 코너
• ::-webkit-scrollbar-button 스크롤 바 끝의 선택 버튼 (드물게 사용되지 않음)

예 : 사용자 정의 수직 스크롤 바

 / * 전체 스크롤 바의 너비 */
::-WebKit-Scrollbar {
  너비 : 12px;
}

/ * 트랙 (배경) */
::- WebKit-Scrollbar- 트랙 {
  배경 : #f1f1f1;
  Border-Radius : 10px;
}

/ * 핸들 (엄지) */
::- Webkit-Scrollbar-Thumb {
  배경 : #888;
  Border-Radius : 10px;
  국경 : 2px 고체 #f1f1f1; / * 선택 사항 : 엄지와 트랙 사이에 간격이 추가됩니다 */
}

/ * 호버 핸들 */
::- WebKit-Scrollbar-thumb : 호버 {
  배경 : #555;
}

참고 : width 수직 스크롤 바에 적용됩니다. 수평 스크롤 바의 경우 ::-webkit-scrollbar 에서 height 사용하십시오.

2. 특정 컨테이너에만 적용하십시오

기본적으로 위의 스타일은 전 세계적으로 적용됩니다. 특정 요소 내에서만 스크롤 바를 사용자 정의하려면 (예 : 클래스가 포함 된 DIV) 의사 요소를 접두사합니다.

 .Custom-Container ::-Webkit-Scrollbar {
  너비 : 8px;
}

.Custom-Container ::-Webkit-Scrollbar-Track {
  배경 : #eee;
}

.Custom-Container ::- Webkit-Scrollbar-Thumb {
  배경색 : #007bff;
  Border-Radius : 4px;
}

그런 다음 html에서 사용하십시오.

 <div class = "custom-container"style = "높이 : 200px; 오버플로 -y : 스크롤;">
  <p> 긴 내용은 여기 ... </p>
</div>

3. 브라우저 크로스 브라우저 고려 사항

• Chrome, Edge, Safari, Opera : 완전한 지원 ::-webkit-scrollbar .
• Firefox : scrollbar-width 및 scrollbar-color 속성을 사용합니다 (제한된 사용자 정의) :

 / * Firefox */
.Custom-Container {
  스크롤 바 넓이 : 얇은; / * 또는 자동, 없음 */
  Scrollbar-Color : #888 #f1f1f1; / * 엄지 손가락 및 추적 색상 */
}

• IE 및 오래된 브라우저 : 지원 없음. 스크롤 바는 기본값이 나타납니다.

4. 모범 사례

• 엄지 손가락을 편안하게 끌 수있을 정도로 크게 유지하십시오.
• 엄지 손가락과 트랙 사이의 대비를 잘 보장하십시오.
• 상호 작용하기 어려운 지나치게 얇은 스크롤 바를 피하십시오.
• 다른 장치에서 테스트 - 터치 패드 스크롤 행동이 다를 수 있습니다.

기본적으로 Chrome/Safari/Edge에 Webkit Pseudo elements를 사용하고 Firefox 용 scrollbar-color 추가하고 다른 브라우저가 우아하게 다시 떨어지도록하십시오. 그것은 완전히 표준화되지 않았지만 현대 환경에서 널리 지원됩니다.

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