使用CSS在圆形DIV中安装滚动条

尽可能具体地说，下面是。。。我试图在一个圆圈内实现子导航，但是内容不符合形状，需要一个滚动条来解决这个问题

我现在有一个问题，我有困难，尽管我尝试CSS使其工作。目前，子导航上的滚动条在圆圈外垂直滚动，内容似乎显示出来

请参阅下面的截图。sub-nav内容从div中显示得太高，滚动条滚动得太低。理想情况下，我希望内容位于突出显示的红色区域内，滚动条显示为蓝色

滚动条（.jb_滚动条）的CSS：

.jb_滚动条{清除：两个；边距：0px 0 10px；}
.jb_滚动条.视口{溢出：隐藏；位置：相对；}
.jb_滚动条.概述{列表样式：无；位置：绝对；左侧：0；顶部：0；}
.jb_滚动条.thumb.end，
.jb_scrollbar.thumb{margin:50px 0；背景色：#ccc；}
.jb_scrollbar.scroll_y.scrollbar{position:relative；float:right；width:10px；}
.jb_scrollbar.scroll_x.scrollbar{位置：相对；高度：15px；清除：两者；边距：0 0 5px；}
.jb_scrollbar.scroll_y.轨迹{高度：100%；宽度：13px；位置：相对；填充：0 1px；}
.jb_scrollbar.scroll_x.track{width:100%；height:7px；position:relative；padding:1px 0px；}
.jb_scrollbar.scroll_y.thumb{高度：20px；宽度：13px；光标：指针；溢出：隐藏；位置：绝对；顶部：0；背景：d5d089；}
.jb_scrollbar.scroll_x.thumb{高度：13px；光标：指针；溢出：隐藏；位置：绝对；左：0；背景：#d5d089；}
.jb_scrollbar.scroll_y.thumb.end{溢出：隐藏；高度：5px；宽度：13px；背景：d5d089；}
.jb_scrollbar.scroll_x.thumb.end{溢出：隐藏；宽度：5px；高度：0px；背景：d5d089；}
.jb_滚动条。禁用{显示：无；}

子导航（#垂直菜单）的CSS：

#垂直菜单{字体系列：Arial，Helvetica，无衬线；字体大小：100%；宽度：221px；高度：221px；背景：url（../images/subnav_bg.png）不重复；页边空白顶部：20px；浮动：左侧；清除：两者；}
#vertmenu a.nav-path-selected{color:#000；边框底部：2px实心#23b3e9；边距底部：-2px；}
#vertmenu a:悬停{颜色：#000；边框底部：2px实心#23b3e9；边距底部：-2px；}
#垂直菜单{列表样式：无；边距：40px 0 50px 10px；边框：无；浮动：左；高度：150px；宽度：130px；}
#vertmenu ul li{边距：0px；填充：3px 0 3px 14px；清除：两者；背景：url（../images/subnav_bullet_bg.png）不重复左中心；}
#vertmenu ul li a{字体大小：14px；行高：14px；文本转换：无；显示：块；文本装饰：无；颜色：#000000；}

如果你能帮我解决这个问题，我将不胜感激。多年来，我一直在为CSS的正确定位而挠头

---

非常感谢

我不知道如何使用滚动条插件，但这里有一个仅使用CSS的快速演示：

该插件以内联样式设置大小，似乎需要大量的样板文件标记，我不得不仔细阅读（令人困惑的）文档，以告诉您的站点有哪些部分以及插件插入/需要哪些部分

因此，我创建了一个单独的模型，您可以使用它来修复您的站点：