请参阅此处的表格。http://www.funkkopfhoerer-test.com/vergleichstabelle-funkkopfhoerer/ http://www.funkkopfhoerer-test.com/vergleichstabelle-funkkopfhoerer/
我正在使用表格插件并在其顶部创建了一个自定义滚动条。但只有在 Safari 浏览器设置中启用它后，它才会显示在 Safari 浏览器上。所以，我编写了这个 Css（见下文），现在无论浏览器设置如何，它都会显示在 Safari 中。但这样做，我在 Chrome 和 Safari 中看不到滚动条箭头。
`.wmd-view-topscroll::-webkit-scrollbar {
-webkit-appearance: none;
}
.wmd-view-topscroll::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
.wmd-view-topscroll::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
}`
这是一个带有 css 箭头的简单解决方案。
它仅在 Chrome 上进行了测试：
Google Chrome，61.0.3163.79（官方版本）（64 位）（同类：稳定）
/* Up */
::-webkit-scrollbar-button:vertical:decrement
/* Down */
::-webkit-scrollbar-button:vertical:increment
/* Left */
::-webkit-scrollbar-button:horizontal:decrement
/* Right */
::-webkit-scrollbar-button:horizontal:increment
/* Scrollbar style for Chrome */
/* Track */
::-webkit-scrollbar
{
width: 14px;
height: 14px;
}
::-webkit-scrollbar-track
{
background: #303030;
border: solid 2px rgba(33,33,33,0.5);
}
/* Thumb */
::-webkit-scrollbar-thumb
{
background: #404040;
}
::-webkit-scrollbar-thumb:hover
{
background: #505050;
}
::-webkit-scrollbar-thumb:active
{
background: #404040;
}
::-webkit-scrollbar-thumb:vertical
{
border-top: solid 2px rgba(33,33,33,0.5);
border-bottom: solid 2px rgba(33,33,33,0.5);
}
::-webkit-scrollbar-thumb:horizontal
{
border-right: solid 2px rgba(33,33,33,0.5);
border-left: solid 2px rgba(33,33,33,0.5);
}
/* Buttons */
::-webkit-scrollbar-button
{
border-style: solid;
height: 16px;
width: 16px;
}
/* Up */
::-webkit-scrollbar-button:vertical:decrement
{
border-width: 0 7px 14px 7px;
border-color: transparent transparent #404040 transparent;
}
::-webkit-scrollbar-button:vertical:decrement:hover
{
border-color: transparent transparent #505050 transparent;
}
/* Down */
::-webkit-scrollbar-button:vertical:increment
{
border-width: 14px 7px 0 7px;
border-color: #404040 transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:increment:hover
{
border-color: #505050 transparent transparent transparent;
}
/* Left */
::-webkit-scrollbar-button:horizontal:decrement
{
border-width: 7px 14px 7px 0;
border-color: transparent #404040 transparent transparent;
}
::-webkit-scrollbar-button:horizontal:decrement:hover
{
border-color: transparent #505050 transparent transparent;
}
/* Right */
::-webkit-scrollbar-button:horizontal:increment
{
border-width: 7px 0 7px 14px;
border-color: transparent transparent transparent #404040;
}
::-webkit-scrollbar-button:horizontal:increment:hover
{
border-color: transparent transparent transparent #505050;
}
<div style="background:#212121;color:white;width:150px;height:186px;padding:8px;font-size:22px;overflow:scroll;white-space:nowrap;">
Sep 8, 2015<br>
<br>
- Support for styling<br>
scrollbars using the<br>
WebKit syntax is now on<br>
the Microsoft Edge backlog<br>
with a priority of medium.
<br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>Lorem ipsum dolor
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>Lorem ipsum dolor
<br><br>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
