无法使用CSS将宽度和高度应用于-webkit-scrollbar

Question

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background-color:#808080;
}

为什么宽度和高度属性不起作用？

Answer 1

width用于垂直滚动条，height用于影响水平滚动条。您无法为垂直滚动条定义高度。这取决于内容大小。

如果要将背景图像添加到滚动条，则会像普通元素一样添加它们：

::-webkit-scrollbar {
    width: 50px;
    height: 50px;
    background:-webkit-linear-gradient(0, blue 50%, white 100%);

}

::-webkit-scrollbar-thumb {
    background-color:#808080;
        background:url("http://www.topdesignmag.com/wp-content/uploads/2010/12/137.jpg");
}

Fiddle

Answer 2

除height

外，此方法有效

示例： http://jsfiddle.net/jasongennaro/gBrNf/

相当确定这是因为浏览器根据内容的高度确定滚动条的高度。 （更多内容等于更短的滚动条...这是一个视觉提示我不确定你可以覆盖。）

Answer 3

您不能将高度应用于滚动条，因为浏览器需要根据页面上的滚动量（取决于页面的高度）来调整高度。

您可以通过使内容适合单个页面并具有3000px高的内容并查看滚动条如何减小其大小来对其进行测试。