我正在通过CSS编程为仅Chrome用户使用滚动条的webkit实现。
我只是重新设计了滚动条，除了一些问题外，它已经完成了很多工作。我想做的是复制Chrome的感觉和滚动条的外观，但只是采用不同的配色方案。除了这些问题外，我已经掌握了一切。
如果任何人都知道如何在不反转内容的情况下反转滚动条本身，请告诉我，我很想知道。 我知道CSS之外可能还有其他方法可以做到这一点，但是我必须根据自己的情况在CSS中找到解决方案。
否则，我一直在尝试编写代码，运行代码以查看我在说什么：
/* SCROLL BAR */
/* URLs to images
resizer: http://i.imgur.com/hyb90YC.png
down-arrow-active: http://i.imgur.com/paWZt7f.png
down-arrow-disabled: http://i.imgur.com/hJVnFr4.png
down-arrow-enabled: http://i.imgur.com/rGqTWWG.png
left-arrow-active: http://i.imgur.com/BhwUFGl.png
left-arrow-disabled: http://i.imgur.com/FocYdIW.png
left-arrow-enabled: http://i.imgur.com/4wBXM2p.png
right-arrow-active: http://i.imgur.com/q39FeM6.png
right-arrow-disabled: http://i.imgur.com/ZDzomkI.png
right-arrow-enabled: http://i.imgur.com/WrfBmNE.png
up-arrow-active: http://i.imgur.com/78jbDC2.png
up-arrow-disabled: http://i.imgur.com/ng0Quya.png
up-arrow-enabled: http://i.imgur.com/nCkVuVg.png
*/
.custom::-webkit-scrollbar {background-color: black;}
/* arrow buttons */
.custom::-webkit-scrollbar-button {background-color: #0d0d0d;background-repeat: no-repeat;background-position: center;}
.custom::-webkit-scrollbar-button:active {background-color: #868686;}
.custom::-webkit-scrollbar-button:hover:not(:active) {background-color: #2c2c2c;}
.custom::-webkit-scrollbar-button:horizontal:increment {background-image: url(http://i.imgur.com/WrfBmNE.png);}
.custom::-webkit-scrollbar-button:horizontal:increment:active {background-image: url(http://i.imgur.com/q39FeM6.png);}
.custom::-webkit-scrollbar-button:horizontal:increment:disabled {background-image: url(http://i.imgur.com/ZDzomkI.png);}
.custom::-webkit-scrollbar-button:horizontal:decrement {background-image: url(http://i.imgur.com/4wBXM2p.png);}
.custom::-webkit-scrollbar-button:horizontal:decrement:active {background-image: url(http://i.imgur.com/BhwUFGl.png);}
.custom::-webkit-scrollbar-button:horizontal:decrement:disabled {background-image: url(http://i.imgur.com/FocYdIW.png);}
.custom::-webkit-scrollbar-button:vertical:increment {background-image: url(http://i.imgur.com/rGqTWWG.png);}
.custom::-webkit-scrollbar-button:vertical:increment:active {background-image: url(http://i.imgur.com/paWZt7f.png);}
.custom::-webkit-scrollbar-button:vertical:increment:disabled {background-image: url(http://i.imgur.com/hJVnFr4.png);}
.custom::-webkit-scrollbar-button:vertical:decrement {background-image: url(http://i.imgur.com/nCkVuVg.png);}
.custom::-webkit-scrollbar-button:vertical:decrement:active {background-image: url(http://i.imgur.com/78jbDC2.png);}
.custom::-webkit-scrollbar-button:vertical:decrement:disabled {background-image: url(http://i.imgur.com/ng0Quya.png);}
/* foreground bar */
.custom::-webkit-scrollbar-thumb {background-color: #3d3d3d;}
.custom::-webkit-scrollbar-thumb:horizontal {border-top: 2px solid #0d0d0d;border-bottom: 2px solid #0d0d0d;}
.custom::-webkit-scrollbar-thumb:vertical {border-left: 2px solid #0d0d0d;border-right: 2px solid #0d0d0d;}
.custom::-webkit-scrollbar-thumb:hover {background-color: #565656;}
/* background bar */
.custom::-webkit-scrollbar-track {background-color: #0d0d0d;}
/* corner, when there is converged scrollbars */
.custom::-webkit-scrollbar-corner {background-color: #232323;}
.custom::-webkit-resizer {border-top: 1px solid #262626; border-left: 1px solid #262626; background-image: url(http://i.imgur.com/hyb90YC.png);}Examine the hover effect when hovering over the scrollbar's buttons either at the top or bottom (bar also fully at top or bottom). Then, move it somewhere in the center.
<center><table cellspacing="6" style="font-family:'Comic Sans MS','Comic Sans',cursive;">
<tr><td>
<center style="padding-top:9px;padding-bottom:15px;"><b>Chrome Default:</b></center>
<div style="height:200px;width:160px;border:1px solid #ccc;overflow:scroll;">
Notice how the<br>
bar normally<br>
reacts when it<br>
reaches the top<br>
or the bottom.<br>
The button gets<br>
that "disabled"<br>
look.<br>
<br>
[place holder text to give scrollbar length]
</div></td>
<td style="background-color:black;color:white;">
<center><b>invert(100%);<br>(to simulate it):</b></center>
<div style="filter:invert(100%);color:black;height:200px;width:160px;border:1px solid #ccc;overflow:scroll;"><b>
Just like the<br>
default, when the<br>
bar is at the top<br>
or bottom, it has<br>
that "disabled"<br>
button look.<br>
<br><br><br>
[place holder text to give scrollbar length]</b>
</div></td>
<td style="background-color:black;color:white;">
<center style="padding-top:9px;padding-bottom:15px;"><b>My Code:</b></center>
<div style="height:200px;width:160px;border:1px solid #ccc;overflow:scroll;" class="custom">
Now when my<br>
scrollbar reaches<br>
the top, it doesn't<br>
get that "disabled"<br>
look unlike the<br>
other bars.<br>
<br><br><br>
[place holder text to give scrollbar length]
</div></td></tr>
</table></center>