진행중기 미터가있는 CSS 스크롤 바

스크롤 막대 자체는 자연스러운 진행 지표입니다. 스크롤 막대의 위치는 스크롤 요소 (보통 전체 페이지)의 스크롤 진행 상황을 직접 반영합니다. 그러나 그것은 "충전 가능한"진행 막대보다 진행 지표와 비슷합니다.

몇 가지 CSS 기술을 사용하여 스크롤 할 때 스크롤바를 "채우기"로 만들 수 있습니다.

그러나 이것은 -webkit- 접두사가있는 스크롤바 스타일 속성에만 적용됩니다. 다시 말해, 이러한 속성은 비표준입니다. 표준화 된 스크롤 바 스타일 특성은 scrollbar-width 과 scrollbar-color 이며,이 효과를 달성 할 수는 없지만 장기적으로는 더 안전 할 수 있습니다. 그럼에도 불구하고, 공급 업체 접두사가있는 버전은 사라지지 않을 수 있으므로, 이것이 이상한 형태의 진보적 인 향상이라고 생각하면 괜찮을 수도 있습니다.

기술은 무엇입니까?

본질적으로, 그것은 스크롤 바 슬라이더 상단 (또는 수평 스크롤 요소의 측면)에 거대한 box-shadow 추가하여 수행됩니다.

 : 루트 {
  -쉐이도 : #43A047;
  -scrollbarbg : #eee;
  --thumbbg : #66bb6a;
}
::-WebKit-Scrollbar {
  너비 : 16px;
}
::- WebKit-Scrollbar- 트랙 {
  배경 : var (-scrollbarbg);
}
::- Webkit-Scrollbar-Thumb {
  배경색 : var (-Humnbg);
  Box-Shadow : 0 -100VH 0 100VH var (-그림자), 0 0 15PX 5PX Black;
}

데모

내가 이것을 처음 보았을 때 마이크의 펜에 있었다.

이 예제는 스크롤 바의 슬라이더 부분을 전혀 구별하지 않으므로 진행률 표시 줄과 비슷하지만 사용하기가 어렵습니다. 내 데모는 약간 다른 컬러 슬라이더를 사용합니다.

정말로 이것을 사용할 수 있습니까?

할 수 없어! 매우 이상하고 비표준 외에. 사파리 브라우저가 충돌하고 고치는 방법을 모르겠습니다.

그래도 매우 관련성있는 CSS 트릭이 있습니다.

스크롤 바 스타일에 대해 더 알고 싶습니다

좋아, 여기를 참조하십시오.

위 내용은 진행중기 미터가있는 CSS 스크롤 바의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!