Question

根据我的理解并且最近搜索过谷歌，似乎自定义滚动条仍未在Firefox中实现。

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

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

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

Firefox中的自定义滚动条

1 个答案: