帶圓角和內部滾動條的DIV

我正在嘗試實現DIV具有內部滾動條和圓角的場景。我的第一次嘗試導致了這一點：帶圓角和內部滾動條的DIV

enter image description here

右手角落變成廣場，在考慮到滾動條。

接下來，我添加了一些帶有一些頂部和底部填充的內部div，以便向下推動滾動條並保持計數的字符串。說出來是這樣的：

enter image description here

我想要的混合，其中滾動條的div全長但是不要讓角落廣場。這可能嗎？

來源

2013-02-11 Lavie Tobey

你能與我們分享您的HTML和CSS？ – 2013-02-11 18:18:27

在搜索了更多內容並看到其他一些意見之後，我想我最終會選擇使用瀏覽器滾動條還是使用像JScrollPane這樣的自定義滾動條。感謝您的輸入！ – 2013-02-11 21:24:09

您應該嘗試自定義滾動條。在您的屏幕截圖中，您使用的是OS X系統，但使用IE（Windows）時，屏幕顯示效果不佳。

看看this stackoverflow question。

來源

2013-02-11 18:04:17 soyuka

如果此問題與您所鏈接的問題重複，則應將其標記爲如此。 – KatieK 2013-02-11 18:26:53

這不是一個複製品，而是一個解決方案 – soyuka 2013-02-12 07:47:03

您可以使用滾動條（scrollbar-thumb）的周圍容器（scrollbar-track）的border-radius。

例如：

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

的jsfiddle：http://jsfiddle.net/p2bWf/

來源：http://css-tricks.com/custom-scrollbars-in-webkit/

來源

2013-02-11 18:30:15

這是一個很好看的解決方案，但是，它需要的不僅僅是Chrome。在FF中打開這個結果顯示了與我的第一張圖像類似的結果。我不認爲我可以使用這個。 – 2013-02-11 20:55:35

帶圓角和內部滾動條的DIV

回答

相關問題