如何将滚动条添加到仅在悬停时显示的固定侧边栏

Question

我正在一个网站上工作，我将侧边栏固定在左侧，并使用此CSS扩展到页面的整个高度：

sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
}

这可以很好地保持侧边栏的位置，但问题是当页面重新调整到较小的高度时，你只能看到侧边栏顶部的东西而且没有办法看到这些东西在侧边栏的底部。

现在，我知道我可以使用overflow-y: scroll;添加滚动条，但我想要做的是只有当侧边栏上的内容超出窗口高度且只出现时才会出现的滚动条在悬停。我还希望滚动条有一些样式，类似于TheNextWeb上的侧边栏或Facebook聊天侧边栏。

我知道我需要一些JavaScript才能做到这一点，但我在JavaScript方面的技能非常有限，所以我对此感到非常感激。

Answer 1

overflow-y: auto应该有效：

对于样式，您应该搜索一个好的滚动条替换，因为滚动条样式仅适用于webkit（http://css-tricks.com/custom-scrollbars-in-webkit/）。这不是一件容易的事，但幸运的是有一些插件：

• http://cubiq.org/iscroll-4
• http://jscrollpane.kelvinluck.com/
• http://www.yuiazu.net/perfect-scrollbar/

仅举几例。

修改 谢谢sheba，我做了一些修改：

.sidebar:hover{
   overflow-y: scroll;
}

http://codepen.io/johannesjo/pen/GcLFn