どうすればスクロールバーがChrome上で、Firefox上でなくても変更される

スクロールバーを使用していて、これらを再作成しようとしています（下のリンクを参照してください）、Chrome上で色を変更するだけですしかし、私がFirefox上にいる場合、これを引き起こす原因は何ですか？これをどうやって適切に処理しますか？私はaswell他の例を見てみましたが、関係なく、私が見てどのような例では、それらのすべては、FirefoxどうすればスクロールバーがChrome上で、Firefox上でなくても変更される

https://codepen.io/akinjide/pen/BpggrZ

HTML

- var n = 1 

h1 Customize the Browser's Scrollbar with CSS 

#wrapper 
    .scrollbar#style-default 
    .force-overflow 

while n < 12 
    .scrollbar(id="style-" + n++) 
    .force-overflow

CSS

.scrollbar { 
    margin-left: 22px; 
    float: left; 
    height: 300px; 
    width: 65px; 
    background: #F5F5F5; 
    overflow-y: scroll; 
    margin-bottom: 25px; 
} 

.force-overflow { 
    min-height: 450px; 
} 

#wrapper { 
    text-align: center; 
    margin: auto; 
} 

#style-1::-webkit-scrollbar, 
#style-2::-webkit-scrollbar { 
    width: 12px; 
    background-color: #F5F5F5; 
} 

#style-4::-webkit-scrollbar, 
#style-5::-webkit-scrollbar, 
#style-6::-webkit-scrollbar, 
#style-7::-webkit-scrollbar, 
#style-8::-webkit-scrollbar, 
#style-9::-webkit-scrollbar, 
#style-10::-webkit-scrollbar, 
#style-11::-webkit-scrollbar { 
    width: 10px; 
    background-color: #F5F5F5; 
} 

/** STYLE 1 */ 
#style-1::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: #555; 
} 

#style-1::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
    background-color: #F5F5F5; 
} 

/** STYLE 2 */ 
#style-2::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: #D62929; 
} 

#style-2::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
    background-color: #F5F5F5; 
} 

/** STYLE 3 */ 
#style-3::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; 
} 

#style-3::-webkit-scrollbar { 
    width: 6px; 
    background-color: #F5F5F5; 
} 

#style-3::-webkit-scrollbar-thumb { 
    background-color: #000000; 
} 

/** STYLE 4 */ 
#style-4::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; 
} 

#style-4::-webkit-scrollbar-thumb { 
    background-color: #000000; 
    border: 2px solid #555555; 
} 

/** STYLE 5 */ 
#style-5::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; 
} 

#style-5::-webkit-scrollbar-thumb { 
    background-color: #0ae; 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, 
         color-stop(.5, rgba(255, 255, 255, .2)), 
           color-stop(.5, transparent), to(transparent)); 
} 

/** STYLE 6 */ 
#style-6::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; 
} 

#style-6::-webkit-scrollbar-thumb { 
    background-color: #F90; 
    background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%, 
               transparent 25%, 
               transparent 50%, 
               rgba(255, 255, 255, .2) 50%, 
               rgba(255, 255, 255, .2) 75%, 
               transparent 75%, 
               transparent) 
} 

/** STYLE 7 */ 
#style-7::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; 
    border-radius: 10px; 
} 

#style-7::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    background-image: -webkit-gradient(linear, 
             left bottom, 
             left top, 
             color-stop(0.44, rgb(122,153,217)), 
             color-stop(0.72, rgb(73,125,189)), 
             color-stop(0.86, rgb(28,58,148))); 
} 

/** STYLE 8 */ 
#style-8::-webkit-scrollbar-track { 
    border: 1px solid black; 
    background-color: #F5F5F5; 
} 

#style-8::-webkit-scrollbar-thumb { 
    background-color: #000000; 
} 

/** STYLE 9 */ 
#style-9::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; 
} 

#style-9::-webkit-scrollbar-thumb { 
    background-color: #F90; 
    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, 
               transparent 25%, 
               transparent 50%, 
               rgba(255, 255, 255, .2) 50%, 
               rgba(255, 255, 255, .2) 75%, 
               transparent 75%, 
               transparent) 
} 

/** STYLE 10 */ 
#style-10::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    background: linear-gradient(left, #96A6BF, #63738C); 
    box-shadow: inset 0 0 1px 1px #5C6670; 
} 

#style-10::-webkit-scrollbar-track { 
    border-radius: 10px; 
    background: #eee; 
    box-shadow: 0 0 1px 1px #bbb, inset 0 0 7px rgba(0,0,0,0.3) 
} 

#style-10::-webkit-scrollbar-thumb:hover { 
    background: linear-gradient(left, #8391A6, #536175); 
} 

/** STYLE 11 */ 
#style-11::-webkit-scrollbar-track { 
    border-radius: 10px; 
    background: rgba(0,0,0,0.1); 
    border: 1px solid #ccc; 
} 

#style-11::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    background: linear-gradient(left, #fff, #e4e4e4); 
    border: 1px solid #aaa; 
} 

#style-11::-webkit-scrollbar-thumb:hover { 
    background: #fff; 
} 

#style-11::-webkit-scrollbar-thumb:active { 
    background: linear-gradient(left, #22ADD4, #1E98BA); 
}

に影響を及ぼさないようです

出典

2017-10-24 Jordan Jones

Firefoxはカスタムスクロールバーの色をサポートしていないと思います。これを変更するために17年以上にわたり要求がありました。 https://bugzilla.mozilla.org/show_bug.cgi?id=77790 http://jscrollpane.kelvinluck.com/などのライブラリを使用する必要があります（これはPITAです）またはhttp://utatti.github.io/perfect-scrollbar/ 幸いです！

出典

2017-10-24 23:31:04 jcarapia

どうすればスクロールバーがChrome上で、Firefox上でなくても変更される

答えて

関連する問題