使用CSS在圓形DIV內適合滾動條

盡我所能具體，這裏去...我試圖在一個圓圈內實現子導航，但內容適合形狀，並要求滾動條來解決這個問題。使用CSS在圓形DIV內適合滾動條

我現在有一個問題，儘管嘗試使CSS工作起來，但仍然遇到困難。目前子導航上的滾動條在圓圈外垂直滾動，內容似乎出來了。

看到下面的screengrab。子導航內容過高，滾動條向下滾動。理想情況下，我希望內容位於突出顯示的紅色區域內，滾動條顯示爲藍色。

Screengrab

CSS的滾動條（.jb_scrollbar）：

.jb_scrollbar { clear: both; margin: 0px 0 10px;} 
.jb_scrollbar .viewport { overflow: hidden; position: relative; } 
.jb_scrollbar .overview { list-style: none; position: absolute; left: 0; top: 0; } 
.jb_scrollbar .thumb .end, 
.jb_scrollbar .thumb { margin: 50px 0 0 0; background-color: #ccc; } 
.jb_scrollbar.scroll_y .scrollbar { position: relative; float: right; width: 10px;} 
.jb_scrollbar.scroll_x .scrollbar { position: relative; height: 15px;clear:both;margin:0 0 5px;} 
.jb_scrollbar.scroll_y .track { height: 100%; width:13px; position: relative; padding: 0 1px;} 
.jb_scrollbar.scroll_x .track { width: 100%; height:7px; position: relative; padding: 1px 0px;} 
.jb_scrollbar.scroll_y .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; background: #d5d089;} 
.jb_scrollbar.scroll_x .thumb { height: 13px; cursor: pointer; overflow: hidden; position: absolute; left: 0; background: #d5d089;} 
.jb_scrollbar.scroll_y .thumb .end { overflow: hidden; height: 5px; width: 13px; background: #d5d089;} 
.jb_scrollbar.scroll_x .thumb .end { overflow: hidden; width: 5px; height: 0px; background: #d5d089;} 
.jb_scrollbar .disable{ display: none;}

CSS的子導航（#vertmenu）：

#vertmenu { font-family: Arial, Helvetica, sans-serif; font-size: 100%; width: 221px; height: 221px; background: url(../images/subnav_bg.png) no-repeat; margin-top: 20px; float: left; clear: both;} 
#vertmenu a.nav-path-selected{ color:#000; border-bottom: 2px solid #23b3e9; margin-bottom: -2px; } 
#vertmenu a:hover{ color:#000; border-bottom: 2px solid #23b3e9; margin-bottom: -2px; } 
#vertmenu ul { list-style: none; margin: 40px 0 50px 10px; border: none; float:left; height: 150px; width: 130px; } 
#vertmenu ul li { margin: 0px; padding: 3px 0 3px 14px; clear: both; background: url(../images/subnav_bullet_bg.png) no-repeat left center; } 
#vertmenu ul li a { font-size: 14px; line-height: 14px; text-transform: none; display: block; text-decoration: none; color: #000000;}

如果你能這麼好心幫我發現了非常感謝的問題。一直在我的頭上撓着CSS來正確定位它的年齡。

非常感謝

來源

2012-10-10 Tim

我不知道如何與滾動條插件做到這一點，但這裏是只使用CSS的快速演示：http://jsbin.com/icelih/4/edit

該插件將在內嵌樣式大小，似乎需要大量的樣板標記，並且我不得不仔細閱讀（令人困惑的）文檔，以確定您的網站有哪些部分以及插件要求插入哪些部分。

所以不是我創建了一個孤立的實體模型，你可以或許用它來修復您的網站：http://jsbin.com/ilebaz/1/edit

來源

2012-10-10 21:55:59 tuff

感謝您的幫助！ – Tim

使用CSS在圓形DIV內適合滾動條

回答

相關問題