[css] Firefox 용 사용자 정의 CSS 스크롤 막대

CSS로 스크롤 막대를 사용자 정의하고 싶습니다.

Safari와 Chrome에서 잘 작동하는이 WebKit CSS 코드를 사용합니다.

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

Firefox에서 같은 작업을 어떻게 수행 할 수 있습니까?

jQuery를 사용하여 쉽게 수행 할 수 있다는 것을 알고 있지만 가능한 경우 순수한 CSS로 수행하는 것을 선호합니다.

누군가의 전문가 조언에 감사드립니다!

답변

2018 년 말 현재 Firefox에서는 사용자 정의가 제한되어 있습니다!

이 답변을 참조하십시오 :

그리고 이것은 배경 정보입니다 : https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

~~Firefox ::-webkit-scrollbar와 친구 가 없습니다 .~~

~~자바 스크립트를 사용해야합니다.~~

많은 사람들이이 기능을 원합니다 : https://bugzilla.mozilla.org/show_bug.cgi?id=77790

JavaScript 대체가 진행되는 한 다음을 시도해보십시오.

https://github.com/noraesae/perfect-scrollbar
https://github.com/jnicol/trackpad-scroll-emulator
https://github.com/vitch/jScrollPane (하지만 구식이며 분명히 PITA입니다 …)

답변

파이어 폭스 (64)는 사양 초안에 대한 지원이 추가 CSS 스크롤바 모듈 레벨 1 추가, 두 개의 새로운 특성 의를 scrollbar-width하고 scrollbar-color스크롤바가 표시되는 방식을 제어 할 수 있도록합니다.

scrollbar-color다음 값 중 하나로 설정할 수 있습니다 (MDN의 설명).

auto 다른 관련 스크롤 막대 색상 속성이없는 경우 스크롤 막대의 트랙 부분에 대한 기본 플랫폼 렌더링입니다.
dark 플랫폼이 제공하는 어두운 스크롤바 또는 어두운 색상의 사용자 정의 스크롤바 일 수있는 어두운 스크롤바를 표시합니다.
light 플랫폼에서 제공하는 다양한 종류의 스크롤 막대 또는 밝은 색의 사용자 정의 스크롤 막대 일 수있는 가벼운 스크롤 막대를 표시합니다.
<color> <color> 첫 번째 색을 스크롤 막대 썸에 적용하고 두 번째 색을 스크롤 막대 트랙에 적용합니다.

그 주 dark와 light값은 현재 파이어 폭스에서 구현되지 않습니다 .

macOS 노트 :

macOS 기본값 인 자동 숨김 반투명 스크롤 막대는이 규칙으로 색상을 지정할 수 없습니다 (배경에 따라 자체 대비 색상을 선택 함). 영구적으로 표시되는 스크롤 막대 (시스템 환경 설정> 스크롤 막대 표시> 항상) 만 색상이 지정됩니다.

비주얼 데모 :

코드 스 니펫 표시

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

스 니펫 확장

scrollbar-width다음 값 중 하나로 설정할 수 있습니다 (MDN의 설명).

auto 플랫폼의 기본 스크롤 막대 너비입니다.
thin 해당 옵션을 제공하는 플랫폼의 얇은 스크롤 막대 너비 변형 또는 기본 플랫폼 스크롤 막대 너비보다 얇은 스크롤 막대입니다.
none 스크롤 막대가 표시되지 않지만 요소는 여전히 스크롤 가능합니다.

사양에 따라 특정 길이 값을 설정할 수도 있습니다. 모두 thin특정 길이는 모든 플랫폼에서 아무것도 할, 무엇을 정확히하는 일은 플랫폼 고유하지 않을 수 있습니다. 특히 Firefox는 현재 특정 길이 값을 지원하지 않는 것으로 보입니다 ( 버그 추적기의 주석은이를 확인하는 것으로 보입니다 ). 그러나 thin키워 크는 macOS 및 Windows 지원을 최소한으로 지원하여 잘 지원되는 것으로 보입니다.

길이 값 옵션과 전체 scrollbar-width특성이 향후 초안에서 제거 될 것으로 고려되고 있으며,이 경우이 특정 특성은 향후 버전에서 Firefox에서 제거 될 수 있습니다.

비주얼 데모 :

코드 스 니펫 표시

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}

<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

스 니펫 확장

답변

대안을 제시해도 될까요?

스크립팅은 없으며 표준화 된 CSS 스타일과 약간의 창의성 만 있습니다. 짧은 답변-기존 브라우저 스크롤 막대의 일부를 마스킹하면 모든 기능을 유지할 수 있습니다.

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

데모 및 좀 더 자세한 설명을 보려면 여기를 확인하십시오 …

jsfiddle.net/aj7bxtjz/1/

답변

누군가가 JQuery 플러그인을 사용하여 작업을 수행하는 경우 결과를 공유하겠다고 생각했습니다.

내가 준 JQuery와 사용자 정의 스크롤 막대를 가를. 그것은 꽤 화려하고 부드러운 스크롤 (스크롤링 관성)을 수행하고 조정할 수있는 많은 매개 변수를 가지고 있지만 결국 CPU를 너무 많이 사용합니다 (DOM에 상당한 양을 추가합니다).

이제 Perfect Scrollbar를 사용 하고 있습니다. 간단하고 가벼우 며 (6KB) 지금까지는 괜찮은 일을하고 있습니다. CPU 집중적이지 않으며 (내가 말할 수있는 한) DOM에 거의 추가하지 않습니다. 조정할 수있는 몇 가지 매개 변수 (wheelSpeed 및 wheelPropagation) 만 있지만, 필요한 것만으로 스크롤 내용에 대한 업데이트 (예 : 이미지로드)를 처리합니다.

추신 : 나는 JScrollPane을 간략히 살펴 보았지만 @simone이 옳다. 현재 약간 오래되었고 PITA이다.

답변

Firefox 64 부터는 간단한 스크롤바 스타일링에 새로운 사양 을 사용할 수 있습니다 ( 공급 업체 접두어가있는 Chrome에서는 완전하지 않음 ).

이 예 에서는 Firefox와 Chrome을 모두 해결하기 위해 서로 다른 규칙을 결합하여 비슷한 최종 결과를 제공하는 솔루션을 볼 수 있습니다 (예 : 원래 Chrome 규칙 사용).

주요 규칙은 다음과 같습니다.

Firefox의 경우

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

크롬

.scroller::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.scroller::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

솔루션과 관련하여 다음과 같이 더 간단한 Chrome 규칙을 사용할 수도 있습니다.

.scroller::-webkit-scrollbar-track  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #0A4C95;
}

마지막으로 Firefox에서도 스크롤 막대에서 화살표를 숨기려면 현재 다음 규칙을 사용하여 화살표를 ” thin “으로 설정해야합니다.scrollbar-width: thin;

답변

2020 년에 작동

/* Thin Scrollbar */
:root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
}

https://github.com/Aris-t2/CustomCSSforFx/issues/160

답변

사용자 스타일로 작동하며 웹 페이지에서는 작동하지 않는 것 같습니다. 나는 이것에 대해 Mozilla로부터 공식적인 지시를 찾지 못했다. 특정 시점에서 작동했지만 Firefox는 공식적으로 지원하지 않습니다. 이 버그는 여전히 열려 있습니다 https://bugzilla.mozilla.org/show_bug.cgi?id=77790

scrollbar {
/*  clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
    color:silver;
}

자세한 내용은 http://codemug.com/html/custom-scrollbars-using-css/ 를 확인 하십시오.