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://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

그리고 이것은 배경 정보입니다 : 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/ 를 확인 하십시오.

@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}