Firefox中的自定义滚动条

Question

根据我的理解和最近搜索Google的情况，似乎自定义滚动条仍然未在Firefox中实现。

我遇到的问题是，我的三个同事都在Firefox中有自定义滚动条，但我仍然有默认的滚动条。

我阅读了他们版本的最新版本注释（53和54），但没有提到滚动条。在检查Mozilla开发者页面（https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar）时，它显示滚动条页面已于2017年8月1日更新 - 所以我想知道是否部分支持包含在发布中，或者是否在此处发生其他事情。

Answer 1

.scroll_container { 
 
    background-color:#000000; 
 
    width:421px; 
 
    height:420px; 
 
    color:#999999; 
 
    border:2px solid #000000; 
 
    border-radius:10px; 
 
    overflow:hidden; 
 
    text-align:justify; 
 
} 
 

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

 
a { 
 
    color:#C800C8; 
 
    font-size:1.2em; 
 
    float:right; 
 
} 
 

 
.top_bottom_mask { 
 
\t position:absolute; 
 
\t overflow:hidden; 
 
\t width:17px; 
 
\t height:10px; 
 
} 
 

 
.left_right_mask { 
 
\t position:absolute; 
 
\t width:0px; 
 
\t border:1px solid #000000; 
 
} 
 

 
.corner_top_mask, .corner_bottom_mask { 
 
\t position:relative; 
 
\t left:-2px; 
 
\t border:6px solid #000000; 
 
\t height:20px; 
 
\t width:13px; 
 
\t border-radius:16px; 
 
} 
 

 
.corner_top_mask { 
 
\t top:-3px; 
 
    left:-4px; 
 
} 
 

 
.corner_bottom_mask { 
 
\t top:-18px; 
 
    left:-4px; 
 
}

<div class="scroll_container"> 
 
    <div class="scroll_content"> 
 
     <h2>CSS Scrollbar Style</h2> 
 
     Many designers dislike the way scrollbars look in browsers, and wish there was a way to make them look at least somewhat more appealing, possibly even blending in with the rest of the web page.<br /><br /> 
 
     Some browsers support different ways to customize colors, none of which (to my knwledge) are W3C compliant. Also none of them seem to work in Firefox at all, which is another downside for many of us.<br /> 
 
     There's also an option to use JS or jQuery scripts for completely custom scrollbars, many of which have problems when it comes to dynamic content and sometimes even images loading within those scrolling containers.<br /><br /> 
 
     I'm just a novice enthusiast myself, so the following example may very well be even worse than some of the methods mentioned above. It's also a bit messy to begin with, but it doesn't use any scripting, it's done using css standard styles, and not too difficult to understand.<br /> 
 
     Basically, all I do is mask part of the existing browser scrollbar, to hide up and down buttons, left and right edges, and round up the top and bottom track for a little extra visual effect. You can do without those and keep them square instead.<br /><br /> 
 
     To achieve this effect, you need 2 containers. The outer container, set to desired dimensions to fit into your web page layout. This container includes the inner container (with content) as well as masking divs.<br /> 
 
     The inner container is where you put all of the content. This one is pushed up, over the edge of outer container, far enough to hide the up button (top:-17px), and its height is greater than that of outer container, so the bottom button goes out of the frame as well. After that you need to adjust padding so the actual content doesn't go out of frame as well.<br /> 
 
     Last thing to do is properly position the masking divs to hide the undesired parts of the browser scrollbar.<br /><br /> 
 
     To visually check what actually happens, move to CSS part of the screen and change border colors from 'solid #000000' to 'solid #FF0000' for example for classes <i>.left_right_mask</i>, <i>.corner_top_mask</i> and <i>.corner_bottom_mask</i>.<br /><br /> 
 
     <a href="http://www.digital-madness.com/index-en.php" target="_blank">http://www.digital-madness.com</a> 
 
     <br /><br /><br /> 
 
    </div> 
 
</div> 
 
<div class="top_bottom_mask" style="left:413px; top:10px;"> 
 
\t <div class="corner_top_mask"></div> 
 
</div> 
 
<div class="left_right_mask" style="left:413px; top:11px; height:418px;"></div> 
 
<div class="left_right_mask" style="left:428px; top:10px; height:418px;"></div> 
 
<div class="top_bottom_mask" style="left:413px; top:420px;"> 
 
\t <div class="corner_bottom_mask"></div> 
 
</div> 
 
<div style="position:absolute; top:10px; left:450px;"> 
 
    Browser support: 
 
    <ul> 
 
     <li>Google Chrome</li> 
 
     <li>Firefox</li> 
 
     <li>Safari</li> 
 
     <li>Opera</li> 
 
    </ul> 
 
    From the technical point of view, this also works in IE. the only problem are those grotesque up and down buttons, which are twice as big as any other browser uses. Not the most pleasing quality of that browser to be honest. 
 
</div>