如何仅在悬停时显示滚动条？（支持手机）答案

【问题标题】：How show scrollbar only with hover? (support mobile)如何仅在悬停时显示滚动条？（支持手机）
【发布时间】：2018-11-17 19:17:53
【问题描述】：

我遇到了有趣的设计问题。我需要像 youtube 菜单（左侧菜单）一样制作滚动条：默认滚动条隐藏，但带有 :hover 显示滚动条。

我使用 overflow: hidden 和 overflow: auto （用于 :hover）。但对于移动设备不适用于此方法。

我搜索解决方案并找到几种有趣的方法： https://codepen.io/kizu/pen/OyzGXY

.scrollbox {
  width: 10em;
  height: 10em;
  overflow: auto;
  visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover,
.scrollbox:focus {
  visibility: visible;
}

.scrollbox_delayed {
  transition: visibility 0.2s;
}
.scrollbox_delayed:hover {
  transition: visibility 0s 0.2s;
}

<h2>Hover it</h2>
<div class="scrollbox" tabindex="0">
  <div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>

<h2>With delay</h2>
<div class="scrollbox scrollbox_delayed" tabindex="0">
  <div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>

但我不知道包装器的高度，这个解决方案对我不起作用。

是否有一种工作方式可以在不使用 JS 的情况下制作类似的东西？如果不存在，那么 JS 最简单的解决方案是什么？（我通过 JS-library 找到示例：https://tympanus.net/Tutorials/ScrollbarVisibility/index.html）

【问题讨论】：

标签： html css youtube scrollbar

【解决方案1】：

滚动条渲染在浏览器之间非常不一致。例如，在 Mac 上，如果使用 webkit，它会默认执行您描述的行为。

如果您想要在所有设备上运行，您应该依赖 JS 解决方案。

但我建议认真考虑这背后的用例，因为根据一般经验法则，任何弄乱用户滚动条的人一开始的界面设计都很糟糕。

【讨论】：

【解决方案2】：

我想出了解决问题的方法。这被证明是显而易见的方法：媒体查询。我为大型设备 (PC) 设置了媒体查询 (:hover)。对于小型设备，滚动始终显示。

当然，这个解决方案可能并不适合所有人，但对我来说它是一个很好的解决方案。

对于一个通用的解决方案是合适的 JS（正如 Edouard Reinach 所说）。

【讨论】：