改变滚动条风格

Question

请参考此链接，例如：CLICK HERE

我使用的是下面的CSS改变滚动条：

/* For the "inset" look only */ 
html { 
    overflow: auto; 
} 
body { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    bottom: 20px; 
    right: 20px; 
    padding: 30px; 
    overflow-y: scroll; 
    overflow-x: scroll; 
} 

/* Let's get this party started */ 
::-webkit-scrollbar { 
    width: 6px; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(255,0,0,0.4); 
} 

这个CSS只更改Y滚动的宽度，我如何更改x滚动的宽度。

请帮我解决这个问题。

Answer 1

DEMO：

http://plnkr.co/edit/bBEj9xa6TucnJq6scIsq?p=preview

使用::-webkit-scrollbar {width: 6px; height: 6px;}

检查演示。

http://plnkr.co/edit/bBEj9xa6TucnJq6scIsq?p=preview

还要注意的是基于CSS的滚动条并不适用于所有的浏览器。所以，我的建议是去基于js的滚动条。

我喜欢jquery.nicescroll

https://github.com/inuyaksa/jquery.nicescroll

Answer 2

您已指定高度以增加x滚动的宽度。 例如{}

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

Answer 3

你可以风格无论是在X和Y方向的滚动条。继承人的Fiddle

::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); 
} 

Answer 4

感谢所有为你的答案，但解决的办法是：

/* Let's get this party started */ 
::-webkit-scrollbar { 
    width: 6px;height:6px; 
}