改變滾動條風格

我使用的是下面的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滾動的寬度。

請幫我解決這個問題。

來源

2016-10-14 chirag satapara

你知道這是一個propietary風格僅適用於Chrome瀏覽器？你知道最後的滾動條對眼睛來說是醜陋的嗎？我推薦一個js滾動條，如果你真的需要風格化它：Perfect Scrollbar（https://noraesae.github.io/perfect-scrollbar/）你可以用你想要的所有css來設計風格 –

':: - webkit-scrollbar {height ：12像素;}'會的工作，但我同意@MarcosPérezGude，你應該去JS滾動 –

@AbhishekPandey，由於這是爲我工作，當我添加一個'高度：6像素;' –

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

來源

2016-10-14 12:19:07

您已指定高度以增加x滾動的寬度。 例如{}

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

來源

2016-10-14 12:14:36

你可以風格無論是在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); 
}

來源

2016-10-14 12:16:26 vivek

感謝所有爲你的答案，但解決的辦法是：

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

來源

2016-10-14 12:18:47

改變滾動條風格

回答

相關問題