悬停时显示滚动条

首先，滚动条是可用性和可访问性问题。 其次，经验法则是：如果一个区域可以滚动，它应该有一个可见的滚动条。 但网络是一个很大的地方，我喜欢技巧，所以我要介绍一下只在悬停时显示它们的这个想法。 即使是 macOS 本身¹ 默认情况下也会隐藏滚动条，并在交互时上下文显示它们。 iOS 上也是如此，导致 令人困惑的时刻。

撇开所有这些不谈，这里有一个方法可以默认隐藏滚动条，只在元素悬停时显示它们。 它是由 Thomas Gladdines 创建的，他也是给我发邮件的人

在我机器上进行快速测试后，它可以在 Chrome、Firefox 和 Safari 上运行，无论我的 macOS 设置如何。 所以非常健壮。

诀窍在于 mask 覆盖了滚动条！ 因此，如果您创建一个与滚动条一样宽的 mask（这里，我只是猜测 17px 可以覆盖它）并且超级超级高（这两者都应该由脚本计算），它可以完美地覆盖滚动条。 您甚至可以 transition 遮罩的位置，模拟淡入淡出效果。 非常聪明。

值得注意的是，这是元素的真实滚动条，而不是伪造的。 伪造一个可能是另一种方法。 Ben Nadel 介绍了 Slack 是如何做到这一点的。 他们的诀窍是强制滚动条在溢出隐藏的区域渲染，并制作一个模仿原生滚动条的虚拟滚动条（然后您可以对其进行更直接的控制）。 它也没有强制滚动条，这 是您可以做到的另一件事，如果这样做有动力。 而且这并不能阻止您 对滚动条进行样式设置，这实际上可能有一些好处，例如指定它的确切宽度。