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

Question

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

我使用溢出：隐藏和溢出：自动（对于：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库中找到了示例：https://tympanus.net/Tutorials/ScrollbarVisibility/index.html）

Answer 1

滚动条在各个浏览器中的呈现非常不一致。例如，在Mac上，如果使用webkit，它将默认执行您描述的行为。

如果要使某些设备在所有设备上都能正常工作，则应依靠JS解决方案。

但是我建议您真正考虑一下其背后的用例，因为作为一般经验法则，任何与用户的滚动条打交道的人一开始都会设计不良的界面。

Answer 2

我想出了解决我问题的方法。 事实证明，这是显而易见的方法：媒体查询。我为大型设备（PC）设置了媒体查询（：hover）。对于小型设备，总是显示滚动条。

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

对于通用解决方案，适合使用JS（如Edouard Reinach所说）。