programing

Firefox용 사용자 지정 CSS 스크롤 막대

i4 2023. 8. 24. 21:47
반응형

Firefox용 사용자 지정 CSS 스크롤 막대

CSS로 스크롤바를 사용자 지정하고 싶습니다.

저는 사파리와 크롬에서 잘 작동하는 웹킷 CSS 코드를 사용합니다.

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

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

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

파이어폭스에서 동일한 작업을 수행하려면 어떻게 해야 합니까?

jQuery를 사용하면 쉽게 할 수 있다는 것을 알지만, 가능하다면 순수한 CSS로 하고 싶습니다.

2018년 말 현재 파이어폭스에서 사용할 수 있는 사용자 지정 기능은 제한되어 있습니다!

다음 답변을 참조하십시오.

배경 정보는 다음과 같습니다. https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

다음과 같은 Firefox는 없습니다. ::-webkit-scrollbar그리고 친구들.

당신은 자바스크립트를 고수해야 할 것입니다.

많은 사람들이 이 기능을 좋아할 것입니다. https://bugzilla.mozilla.org/show_bug.cgi?id=77790 을 참조하십시오.

JavaScript 교체에 관한 한 다음을 시도할 수 있습니다.

Firefox 64는 의 두 가지 새 속성을 추가하고 스크롤 막대가 표시되는 방법을 제어하는 규격 초안 CSS 스크롤 막대 모듈 레벨 1에 대한 지원을 추가합니다.

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

  • auto다른 관련 스크롤 막대 색상 속성이 없는 경우 스크롤 막대의 트랙 부분에 대한 기본 플랫폼 렌더링.
  • <color> <color>첫 번째 색을 스크롤 막대 엄지에 적용하고 두 번째 색을 스크롤 막대 트랙에 적용합니다.

에는 이에포함사양이 포함되었습니다.dark그리고.lightFirefox에서 구현되지 않은 값입니다.이 값은 이후 사양에서 제거되었습니다.

모바일 파이어폭스가 탑재된 Android 재고에서는 엄지손가락에 색상을 지정할 수 있지만 색상을 지정할 수 있는 트랙이 없습니다.

또한 99.0 이전 버전의 macOS Firefox에서는 macOS 기본값인 자동 숨기기 반투명 스크롤바를 이러한 규칙으로 스타일을 지정할 수 없습니다.Firefox 99.0 기준으로 모든 macOS 스크롤바 모드(시스템 기본 설정 > 스크롤바 표시에서 구성)를 색상으로 지정할 수 있습니다.

비주얼 데모:

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.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-colors">
  <p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

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

  • auto플랫폼의 기본 스크롤 막대 너비입니다.
  • thin해당 옵션을 제공하는 플랫폼의 얇은 스크롤 막대 너비 변형 또는 기본 플랫폼 스크롤 막대 너비보다 얇은 스크롤 막대입니다.
  • none스크롤 막대는 표시되지 않지만 요소는 계속 스크롤할 수 있습니다.

규격에 따라 특정 길이 값을 설정할 수도 있습니다.둘다요.thin특정 길이가 모든 플랫폼에서 아무것도 하지 않을 수 있으며, 정확히 무엇을 하는지는 플랫폼에 따라 다릅니다.특히 Firefox는 현재 특정 길이 값을 지원하지 않는 것으로 나타납니다(Bug Tracker에 대한 이 설명은 이를 확인하는 것 같습니다).thin그러나 적어도 macOS와 Windows를 지원하는 키워크는 잘 지원되는 것으로 보입니다.

안드로이드와 모바일 파이어폭스의 재고에는auto, 폭엄손가이은미꽤얇다습니그, 리고지락▁width고▁is그.thin두께가 얇아지지 않습니다.

아마도 길이 값 옵션과 전체를 주목할 필요가 있을 것입니다.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>

Firefox 64 이후에는 간단한 스크롤바 스타일에 새로운 사양을 사용할 수 있습니다(벤더 접두사가 있는 Chrome에서처럼 완전하지 않음).

이 예제에서는 서로 다른 규칙을 결합하여 Firefox와 Chrome 모두를 처리하는 솔루션을 확인할 수 있으며 최종 결과는 유사합니다(예: 원래 Chrome 규칙 사용).

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

파이어폭스의 경우

.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;
}

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

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

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

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

대안을 제시해도 되겠습니까?

스크립팅은 전혀 없고, 표준화된 CSS 스타일과 약간의 창의성만 있습니다.단답형 - 기존 브라우저 스크롤 막대의 일부를 마스킹하여 모든 기능을 유지합니다.

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

데모 및 자세한 설명은 여기를 참조하십시오.

jsfiddle.net/aj7bxtjz/1/

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

누군가가 jQuery 플러그인을 고려할 경우에 대비하여 제가 발견한 내용을 공유하려고 합니다.

저는 jQuery Custom Scrollbar를 이전에 주었습니다.꽤 화려하고 부드러운 스크롤링(스크롤링 관성 포함)과 조정할 수 있는 매개 변수가 많지만, 결국 저에게는 CPU 집약도가 너무 높았습니다(DOM에 상당한 양을 추가합니다).

이제 완벽한 스크롤바를 보여드리겠습니다.이 제품은 간단하고 가벼운(6KB) 제품으로 지금까지는 괜찮은 성능을 발휘하고 있습니다.CPU 사용량이 전혀 많지 않으며(내가 알기로는) DOM에 거의 추가되지 않습니다.조정(휠 속도 및 휠 전파)하는 데 필요한 매개 변수는 몇 가지뿐이지만 스크롤 콘텐츠에 대한 업데이트(예: 이미지 로드)만 잘 처리하면 됩니다.

추신: JScrollPane을 잠깐 살펴보긴 했지만, @simone이 옳습니다. 지금은 약간 구식이고 PITA입니다.

2021년 현재 Firefox 스크롤바 사용자 지정을 위한 속성은 두 가지뿐입니다.scrollbar-color그리고.scrollbar width.

scrollbar-color: red yellow; /* track thumb */
scrollbar-width: 5px; /* none, thin, or auto */


.demo {
  overflow-y: scroll;
}

.demo {
  scrollbar-color: red yellow;
  scrollbar-width: 10px;
}
<div class="demo">
  <p>
    some scroll text...<br><br> don't you dare scroll to the bottom...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some
    scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> still here? fair warning, do
    NOT scroll farther down!<br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> STOP!
    <br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> NOW I'M MAD<br><br> some
    scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> AND THAT IS GENERALLY A BAD IDEA<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> bye
    <br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    last last last warning; you will not like what is at the bottom<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> thare is nothing at the bottom!<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> NOTHING >:D
  </p>
</div>

HTML

<div class="demo">

CSS

.demo {
    overflow-y: scroll;
}

.demo {
    scrollbar-color: red yellow;
    scrollbar-width: 5px;
}

2022년

최신 Firefox 및 Chrome 버전으로 테스트됨

다음 스니펫은 Chrome과 Firefox에서 동일한 스크롤바 스타일을 표시합니다. 사용해 보십시오.

html {
  /* For Firefox */
  overflow-y: scroll;
  scrollbar-color: #008de4 #0d3b97;
  scrollbar-width: thin;
}

/* For Chrome and other browsers except Firefox */
body::-webkit-scrollbar {
    width: 0.5em;
    background-color: #0d3b97;
}
body::-webkit-scrollbar-thumb {
    background-color: #008de4;
}
<html>
<body style="height: 600px"></body>
</html>

다음을 사용하여 스크롤 막대 트랙을 사용자 지정할 수도 있습니다(그러나 Firefox에서는 작동하지 않습니다).

::-webkit-scrollbar-track

여기서 저는 모든 주요 브라우저에 대해 이 CSS를 사용해보고 테스트했습니다.사용자 지정 색상이 스크롤 막대에서 잘 작동합니다.

예, 여러 브라우저 버전에는 제한이 있습니다.

/* Only Chrome */
html::-webkit-scrollbar {width: 17px;}
html::-webkit-scrollbar-thumb {background-color: #0064a7; background-clip: padding-box; border: 1px solid #8ea5b5;}
html::-webkit-scrollbar-track {background-color: #8ea5b5; }
::-webkit-scrollbar-button {background-color: #8ea5b5;}
/* Only IE */
html {scrollbar-face-color: #0064a7; scrollbar-shadow-color: #8ea5b5; scrollbar-highlight-color: #8ea5b5;}
/* Only FireFox */
html {scrollbar-color: #0064a7 #8ea5b5;}
/* View Scrollbar */
html {overflow-y: scroll;overflow-x: hidden;}
<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <header>
        <div id="logo"><img src="/logo.png">HTML5&nbsp;Layout</div>
        <nav>  
            <ul>
                <li><a href="/">Home</a>
                <li><a href="https://html-css-js.com/">HTML</a>
                <li><a href="https://html-css-js.com/css/code/">CSS</a>
                <li><a href="https://htmlcheatsheet.com/js/">JS</a>
            </ul>
        </nav>
    </header>
    <section>
        <strong>Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address.</strong>
    </section>
    <section id="pageContent">
        <main role="main">
            <article>
                <h2>Stet facilis ius te</h2>
                <p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>
            </article>
            <article>
                <h2>Illud mollis moderatius</h2>
                <p>Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>
            </article>
            <article>
                <h2>Ex ignota epicurei quo</h2>
                <p>Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p>
            </article>
            <article>
                <h2>His at autem inani volutpat</h2>
                <p>Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p>
            </article>
        </main>
        <aside>
            <div>Sidebar 1</div>
            <div>Sidebar 2</div>
            <div>Sidebar 3</div>
        </aside>
    </section>
    <footer>
        <p>&copy; You can copy, edit and publish this template but please leave a link to our website | <a href="https://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p>
        <address>
            Contact: <a href="mailto:me@example.com">Mail me</a>
        </address>
    </footer>


</body>

</html>

키워드 값 스크롤 막대 너비: auto|thin|none;

글로벌 값 스크롤 막대 너비: inherit|initial|revert|revert|레이어; 스크롤 막대 너비: unset;

파이어폭스 84는 2020년 12월 15일에 출시되었습니다.제거된 속성은 다음과 같습니다.

제거된 고유 -moz-default-aperance 속성 값은 스크롤 막대-small(스크롤 막대-폭: thin 대신 사용)과 스크롤 막대(macOS만 해당, 스크롤 막대-수평 및 스크롤 막대-수직이 대신 사용됨)입니다(버그 1673132).

이 기능은 매우 실험적이며 모질라는 모든 페이지의 모든 사람이 사용할 수 있게 될 때까지 할 일이 많다고 생각합니다.많은 솔루션을 테스트했지만 다음 코드는 완벽하게 작동합니다.

CSS

:root {
  scrollbar-color: #333333 #999999 !important;
  scrollbar-width: thin !important;
}

OR

#ClassName {
  scrollbar-color: #333333 #999999 !important;
  scrollbar-width: thin !important;
}

참조: 링크 1 링크 2

Firefox는 다음만 허용합니다.

scrollbar-color: #F8F8F8 // Add your color
scroll-bar-width: thin/auto/none

2021

파이어폭스

.nav{
scrollbar-width: 0px;
scrollbar-width: none;}

크롬

::-webkit-scrollbar {
  height: 0;  /* Remove scrollbar space */
  background: transparent;  
/* Optional: just make scrollbar invisible */
}

수직 및 수평 스크롤 막대의 경우 너비 또는 높이 속성 변경

간단한 대답은 다음과 같습니다.

다음 작업만

파이어폭스에서(2022년 1월 기준):

:

속성(의사 요소가 아님!) 허용되는 값
scrollbar-width thin 얇음 ())
auto 버전표준두꺼운 버전)
none 바 )다▁(
scrollbar-color color color

:

먼저 스크롤바 엄지와 두 번째 스크롤바 배경의 두 가지 색상 값을 모두 설정해야 합니다."black"과 같은 이름, "#000000"과 같은 16진수 값, "rgb(0,0,0)"와 같은 함수 및 "var(--이전에 정의된 검정)"와 같은 변수를 사용하는 모든 일반 색상 값이 필요합니다.그러나 일반적으로 또는 CSS 변수를 통해 선형 그레이디언트를 입력으로 사용하지 않습니다.그나저나 부동산의 순서는 중요하지 않습니다.

사용자 스타일로 작동하며 웹 페이지에서는 작동하지 않는 것 같습니다.나는 이것에 대해 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/ 을 확인하십시오.

이것은 워드프레스 가이즈 사용자 정의 CSS에서 작동합니다.

/* Fire-Fox Scrollbar */
:root{
  scrollbar-face-color: rgb(176, 88, 54); /* Firefox 63 compatibility */
  scrollbar-track-color: rgb(51, 62, 72); /* Firefox 63 compatibility */
  scrollbar-color: rgb(176, 88, 54) rgb(51, 62, 72);
  scrollbar-width: auto;
}

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

.mat-tab-header {
   overflow-x: scroll !important;
   // For Firefox
   scrollbar-color: transparent transparent;
   border-bottom: none; 
}
    
.mat-tab-header::-webkit-scrollbar { // TO Remove horizontal scrollbar in tabs
   display: none !important;
}

언급URL : https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox

반응형

'programing' 카테고리의 다른 글

Spring 관리 컨텍스트 외부의 클래스에 콩 주입  (0) 2023.08.24
도커는 영원히 "도커는 시작합니다...윈도우즈 태스크에서  (0) 2023.08.24
Maria 백업 중에 mysqld 오류가 발생하는 이유  (0) 2023.08.24
자리 표시자 텍스트 변경  (0) 2023.08.19
sendAsynchronousRequest:queue:completionHandler:  (0) 2023.08.19

'programing'의 다른글

  • 현재글Firefox용 사용자 지정 CSS 스크롤 막대

관련글

댓글

티스토리툴바