编写Webkit CSS后滚动条中没有箭头按钮

问题描述

请参考此处的表格。

Please refer to the table here.http://www.funkkopfhoerer-test.com/vergleichstabelle-funkkopfhoerer/

我正在使用表插件，并在其顶部创建了一个自定义滚动条。但是直到在Safari浏览器设置中将其启用，它才出现在Safari浏览器中。因此，我编写了此CSS（请参见下文），无论浏览器设置如何，它现在都在Safari中显示。但是这样做，我无法在Chrome和Safari中看到滚动条箭头。

I'm using Table Plugin and created a custom scrollbar on top of it. But It wasn't showing up on Safari browsers until it is enabled in Safari Browser settings. So, I wrote this Css (see below) and It is now showing up in Safari regardless of browser settings. But doing so, I can't see scrollbar arrows in Chrome and 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;
}`

推荐答案

这是一个简单的解决方案

仅在Chrome上进行了测试：

Google Chrome，61.0.3163.79（Officiell版本）（64位比特币）（同类群组：稳定）

Here is a simple solution with css arrows.

It is only tested with Chrome:
Google Chrome, 61.0.3163.79 (Officiell version) (64 bitar) (cohort: Stable)

/* 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>&lt;br>
  <br>&lt;br>
  <br>&lt;br>
  <br>&lt;br>
  <br>&lt;br>
  <br>&lt;br>Lorem ipsum dolor
  <br>&lt;br>
  <br>&lt;br>
  <br>&lt;br>
  <br>&lt;br>
  <br>&lt;br>
  <br>&lt;br>
  <br>&lt;br>
  <br>&lt;br>Lorem ipsum dolor
  <br>&lt;br>
</div>

这篇关于编写Webkit CSS后滚动条中没有箭头按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！