隐藏多个滚动条 CSS 所有浏览器答案

【问题标题】：Hiding multiple scrollbars CSS all browsers隐藏多个滚动条 CSS 所有浏览器
【发布时间】：2014-01-30 13:42:16
【问题描述】：

我很难完成我想做的事情，我开始怀疑这是否可能。本质上，我有三个divs，每个的宽度都不同，具体取决于您悬停在哪一个上（简单过渡）。这些divs 的高度始终等于浏览器窗口的 100% 高度，使用 jQuery 计算得出。

我使用overflow-y: scroll 来完成可滚动内容的多个部分。但是，包含三个滚动条看起来很笨拙，所以我试图摆脱它们。在 chrome 上，这很简单，我只使用::-webkit-scrollbar { display: none; }，但对于其他浏览器，它就没有那么简单了。其他问题已经回答说我需要将我的内容包装在一个具有overflow: hidden 的 div 中，但是如果所有这些转换都完全失败，我就无法让它工作。

这是我正在谈论的demo。提前致谢！

【问题讨论】：

我觉得三个滚动条看起来很不错，删除它们只会损害可用性。
滚动条对我来说很好，除非您没有更重要的事情要做，否则无需花时间。
只在悬停时给overflow-y:scroll; 和一个工作小提琴jsfiddle.net/wizam/9T7ex/2
正如我在下面提到的，这并没有完全摆脱滚动条，当你停止悬停时，它会将每个 div 重置回其内容的顶部，这不是我的效果我在找

标签： javascript jquery html css

【解决方案1】：

overflow-y: hidden 将隐藏滚动条，如果您将其设置为在 :hover 上滚动，当用户将鼠标悬停在每个面板上时，您仍然可以滚动：

.panel {
    overflow-y: hidden;
}
.panel:hover {
    overflow-y: scroll;
}

前面的示例缺少默认隐藏，这将阻止面板滚动回顶部。

【讨论】：

这肯定更好.. 所以你不认为有办法完全删除它们吗？
用户如何在没有滚动条的情况下滚动框？正如前面提到的那样，您可以尝试隐藏滚动条，但这对用户来说并不太清楚。或者，您可以尝试使用更多的 jQuery 插件，例如 naeka.github.io/jquery-scrollbar，以获得更微妙的滚动条。

【解决方案2】：

您可以在悬停时显示滚动条

#container .display-panel:hover {
     overflow-y: scroll;   
}

从显示面板http://jsfiddle.net/9T7ex/1/中移除overflow-y

【讨论】：

不幸的是，当您停止将鼠标悬停在每个 div 上时，这会将 div 内容重置回顶部，但我确实喜欢这样看起来更好一点。
容器可以设置高度吗？
他们有，不是吗？它们的高度始终设置为窗口的高度。
你可以看一下stackoverflow.com/questions/13317364/…，但是css解决方案需要你设置宽度。这个想法是通过将包含 div 的宽度减小滚动条宽度来隐藏滚动条