在UL中左/右CSS垂直滾動條填充可能嗎？

是否可以在滾動條或滾動條軌道周圍添加填充或邊距？我試過了，只能得到填充頂部/底部。向UL添加填充對滾動條沒有影響。滾動條上的負邊距不起作用。想法？ JS Fiddle here。在UL中左/右CSS垂直滾動條填充可能嗎？

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

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

::-webkit-scrollbar-thumb { 
-webkit-border-radius: 10px; 
border-radius: 10px; 
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);

來源

2014-02-10 sandraqu

可以看到一個例子那邊（http://jsfiddle.net/6KprJ/1/），基本上忘記加入餘量或填充有，只是增加滾動區域的寬度/高度，減少拇指/磁道的寬度的高度。

how to customise custom scroll?從

::-webkit-scrollbar { 
    width: 14px; 
    height: 18px; 
} 
::-webkit-scrollbar-thumb { 
    height: 6px; 
    border: 4px solid rgba(0, 0, 0, 0); 
    background-clip: padding-box; 
    -webkit-border-radius: 7px; 
    background-color: rgba(0, 0, 0, 0.15); 
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); 
} 
::-webkit-scrollbar-button { 
    width: 0; 
    height: 0; 
    display: none; 
} 
::-webkit-scrollbar-corner { 
    background-color: transparent; 
}

來源

2014-02-10 17:50:18

聰明啊......謝謝 –

大家很奇怪，這裏的魔術是'背景剪輯：浸軋box'導致元素的邊界下它被切斷（與背景顏色沿），所以通過將邊框設置爲完全透明的顏色，它將引起與邊框寬度匹配的填充效果。沒有這個規則，背景顏色將通過邊界可見。 – SeinopSys

奇怪的是，當你想要增加空隙，增加寬度並保留圓形邊框時，這種方法就失效了。有小費嗎？ – tatsu

引用此溶液使內容和滾動條之間的實空間（如果可滾動元件不具有透明背景）。對窗口滾動條有用。

.scroll {overflow:auto;} 
.scroll::-webkit-scrollbar { 
    width:16px; 
    height:16px; 
    background:inherit; 
} 
.scroll::-webkit-scrollbar-track:vertical { 
    border-right:8px solid rgba(0,0,0,.2); 
} 
.scroll::-webkit-scrollbar-thumb:vertical { 
    border-right:8px solid rgba(255,255,255,.2); 
} 
.scroll::-webkit-scrollbar-track:horizontal { 
    border-bottom:8px solid rgba(0,0,0,.2); 
} 
.scroll::-webkit-scrollbar-thumb:horizontal { 
    border-bottom:8px solid rgba(255,255,255,.2); 
} 
.scroll::-webkit-scrollbar-corner, 
    .scroll::-webkit-resizer {background:inherit; 
    border-right:8px solid rgba(255,255,255,.2); //optional 
    border-bottom:8px solid rgba(255,255,255,.2); //optional 
}

來源

2016-02-17 15:02:36

在UL中左/右CSS垂直滾動條填充可能嗎？

回答

相關問題