javascript - 隐藏多个滚动条 CSS 所有浏览器

Question

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

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

这是一个 demo我在说什么。提前致谢!

Answer 1

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

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

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