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;
}

我试图通过轨道和拇指设置高度，但我不认为这是正确的方法。

有人知道这个秘密吗？我没有在google上找到任何具体内容。

Answer 1

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

Answer 2

除非我误解了您的问题...

您可以通过在::-webkit-scrollbar-track上设置边距来实现。以50px作为示例数字...

对于垂直滚动条：margin: 50px 0;

对于水平滚动条：margin: 0 50px;

我尚未对此进行广泛的测试，因此我不知道它可能引起的任何问题。

在上述JSFiddle上工作的示例： http://jsfiddle.net/qrgc8spm/

Answer 3

这个怎么样：

html {
    overflow: scroll;
}
body {
    position: absolute;
    left: 20px;
    right: 20px;
    padding: 30px; 
    overflow-y: scroll;
    overflow-x: hidden;
}

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

3 个答案: