javascript - 使用 CSS 在导航栏上创建 "invisible"滚动条(隐藏不起作用)

Question

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

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

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

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

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

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

Answer 1

您可以包装您的可滚动元素在宽度为 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