html - 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 {
	position:absolute;
	overflow:hidden;
	width:17px;
	height:10px;
}

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

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

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

.corner_bottom_mask {
	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;">
	<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;">
	<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>