这是我的自定义 webkit 滚动条的 CSS 样式。一切都以我想要的方式显示，但我的垂直滚动条的箭头递增/递减按钮没有显示。当我从行中删除“水平”时::-webkit-scrollbar-button，水平和垂直滚动条是相同的，就会显示一个图像。但是，如果我为此属性指定水平或垂直，则只会显示水平滚动条按钮的图像。我还验证了图像文件没有问题。
::-webkit-scrollbar
{
width: 17px;
height: 17px;
background: #191919;
}
::-webkit-scrollbar-button:start:decrement
{
height: 20px;
width: 20px;
display: block;
background-repeat: no-repeat;
}
::-webkit-scrollbar-button:end:increment
{
height: 20px;
width: 20px;
display: block;
background-repeat: no-repeat;
}
::-webkit-scrollbar-track-piece:horizontal
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #3b3b3b));
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-track-piece:vertical
{
background: #191919;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb
{
-webkit-border-radius: 6px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed1c24), color-stop(100%, #96161b));
border: 1px solid #5c0d10;
border-top: 1px solid #f1383f;
border-left: 1px solid #f1383f;
}
::-webkit-scrollbar-button:veritcal:decrement
{
background-image: url(images/up.png);
}
::-webkit-scrollbar-button:veritcal:increment
{
background-image: url(images/down.png);
}
::-webkit-scrollbar-button:veritcal:decrement:active
{
background-image: url(images/upa.png);
}
::-webkit-scrollbar-button:veritcal:increment:active
{
background-image: url(images/downa.png);
}
::-webkit-scrollbar-button:horizontal:decrement
{
background-image: url(images/left.png);
}
::-webkit-scrollbar-button:horizontal:increment
{
background-image: url(images/right.png);
}
::-webkit-scrollbar-button:horizontal:decrement:active
{
background-image: url(images/lefta.png);
}
::-webkit-scrollbar-button:horizontal:increment:active
{
background-image: url(images/rightaa.png);
}