使用CSS在导航栏上创建“不可见”滚动条（其中隐藏不起作用）

Question

我已经进行了研究，但这个问题真的无济于事。 我在网站的左侧使用导航栏的网站使用CSS样式和HTML模板。 我想向该导航栏添加很多链接，所以我添加了一个溢出： 零件。

现在不幸的是，我在网站中间有一个难看的滚动条。 我曾尝试将其更改为“隐藏”，但这会阻止全部滚动。 我试图更改滚动条的颜色以匹配网站，但是我对此一无所知。 代码如下：

aside#sidebar {
    width:250px;
    position: fixed;
    height:100%;
    overflow: scroll;
}

如果我取出“ position：fixed;” 该栏占据了网页的其余部分，并且无法正常工作。

有人有建议吗？ 无论如何，有没有摆脱这个滚动条或很好地着色？

谢谢你的帮助！ 克里斯蒂娜（Christina）

Answer 1

您可以将可滚动元素包装在一个overflow:hidden父对象中，该父对象的宽度为17px（或更大）-小于内部可滚动元素的宽度（以隐藏滚动条）。

 #sidebar{ position:relative; overflow:hidden; height:100px; width:150px; /* note this */ } #sidebar ul{ width:170px; /* and this */ overflow-y: scroll; /* add scrollbar */ position:absolute; height: inherit; /* parent height or 100% */ background: #ddd; } 

  <div id="sidebar"> <ul> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </div> 

要给它们上色，您可以使用JS插件，也可以在Webkit Brosers中本地完成

关于更好的UX（用户体验），滚动条应该是可见的，或者至少应具有一些设计元素，这些元素将假定存在较长的垂直可滚动列表

这是我涵盖的使用JS和jQuery（+ jQuery UI）的类似主题：
如何制作自定义滚动条jQuery插件