无法使用 CSS 将宽度和高度应用于 -webkit-scrollbar
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7700859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't apply width and height to -webkit-scrollbar using CSS
提问by Michael Grigsby
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background-color:#808080;
}
Why do the width and height attributes not work?
为什么宽度和高度属性不起作用？
回答by Mohsen
widthis for vertical scrollbars and heightaffects horizontal scrollbars. You can't define height for a vertical scrollbar. That is dependent on content size.
width用于垂直滚动条并height影响水平滚动条。您不能为垂直滚动条定义高度。这取决于内容大小。
If you want to add background images to your scrollbar, they are added like normal elements:
如果要将背景图像添加到滚动条，它们会像普通元素一样添加：
::-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");
}
回答by Jason Gennaro
This works, except for the height
这有效，除了 height
Example:http://jsfiddle.net/jasongennaro/gBrNf/
示例：http : //jsfiddle.net/jasongennaro/gBrNf/
Fairly certain that's because the browser determines the height of the scrollbar based on the height of the content. (More content equals shorter scrollbar... it's a visual cue I am not sure you can override.)
可以肯定这是因为浏览器根据内容的高度来确定滚动条的高度。（更多的内容等于更短的滚动条……这是一个视觉提示，我不确定您是否可以覆盖。）
回答by Djongov
You cannot apply height to scrollbars as the browser needs to adjust height based on how much there is to scroll on the page (depending on the height of the page).
您不能将高度应用于滚动条，因为浏览器需要根据页面上的滚动量（取决于页面的高度）调整高度。
You can test it by having content that fits on a single page and by having content that is 3000px in height and see how the scrollbar will lower its size.
您可以通过让内容适合单个页面以及让内容高度为 3000 像素来测试它，并查看滚动条将如何降低其大小。
