无法使用 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

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

您可以通过在单个页面上放置适合的内容以及高度为 3000 像素的内容来测试它，并查看滚动条将如何降低其尺寸。