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

How can I add a scroll bar to a fixed sidebar that only appears on hover

本文关键字：侧边栏 悬停 滚动条 添加      更新时间：2023-09-26

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

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

这可以很好地保持侧边栏的位置，但问题是当页面大小调整到较小的高度时，您只能在侧边栏顶部看到内容，而无法看到侧边栏底部的内容。

现在，我知道我可以使用overflow-y: scroll;添加一个滚动条，但我试图做的是有一个滚动条，该滚动条仅在侧边栏上的内容超过窗口高度时才会出现，并且仅在悬停时出现。我还希望滚动条有一些风格，类似于TheNextWeb上的侧边栏或Facebook聊天侧边栏。

我知道我需要一些 JavaScript 来做到这一点，但我在 JavaScript 方面的技能非常有限，所以我感谢这方面的任何帮助。

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/

仅举几例。

编辑：感谢示巴，我做了一些修改：

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

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

相关文章：