CSS3 / webkit：如何更改滚动条滑块的大小？

Question

小提琴： http://jsfiddle.net/vVJGD/

::-webkit-scrollbar{
    width: 10px;
    padding-top: 40px;
}

::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    border: 1px solid black;
    background: rgb(41,41,41);
    border-radius: 10px;

}
::-webkit-scrollbar-thumb{
    border-radius:10px;
    height: 30px;
    width: 8px;
    border: 1px solid black;
    background: rgb(111,111,111);
    -webkit-box-shadow: 0 1px 1px rgb(0,0,0);
    background: -webkit-linear-gradient(rgb(200,200,200), rgb(150,150,150));
}

::-webkit-scrollbar-track-piece {
    height: 30px;
}

我尝试通过 track-piece 设置高度和拇指，但我认为这不是正确的方法。

有人知道其中的秘密吗？我在谷歌上没有找到任何具体的东西。

Answer 1

设置 height 和 width 属性：http://jsfiddle .net/vVJGD/8/，Webkit 会将它们分配到适当的方向。

Answer 2

是的，这是可能的。我们可以在css中编辑样式：

::-webkit-scrollbar-thumb {
  background: #bbbbbb;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 5px; 
  height: 50px; }