Question

这是我的自定义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);
}

Answer 1

可能是因为你在css中拼写了垂直'垂直'......？

Webkit滚动条按钮仅显示水平

1 个答案: