使用 CSS 在导航栏上创建一个 "invisible" 滚动条（隐藏不起作用）

Question

我已经研究过了，但我真的没有解决这个问题。我正在为一个网站使用 CSS 样式和 HTML 模板，他们在左侧有一个导航栏。我想向这个导航栏添加很多链接，所以我添加了一个 overflow: scroll;组件。

现在不幸的是，我在网站中间有一个非常难看的滚动条。我尝试将其更改为 "hidden" 但这会阻止一起滚动。我试图更改滚动条的颜色以匹配网站，但我并没有真正做到这一点。代码如下：

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

如果我删除 "position:fixed;" 栏会占据网页的其余部分并且无法正常工作。

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

感谢您的帮助！克里斯蒂娜

Answer 1

您可以 wrap 您的可滚动元素在宽度为 17px（或更多）的 overflow:hidden 父级内 - 小于内部可滚动元素宽度（为了隐藏滚动条）。

#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 插件或这样做 natively for Webkit Brosers

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

这是我介绍过的一个类似主题，它使用 JS 和 jQuery (+jQuery UI):
How to make custom scrollbar jQuery plugin

使用 CSS 在导航栏上创建一个 "invisible" 滚动条（隐藏不起作用）

Creating an "invisible" scrollbar on a navigation bar using CSS (where hidden doesn't work)

html

javascript

css

jquery

scrollbar