盘旋在悬停的滚动条

网页滚动条的设计既要考虑用户体验，也要兼顾无障碍访问。一般来说，如果一个区域需要滚动，就应该显示滚动条。然而，网络世界千变万化，一些巧妙的技巧可以提升用户体验。本文将介绍一种方法，让滚动条默认隐藏，只有在鼠标悬停时才显示。

这种方法由Thomas Gladdines提出，并在我的测试中，它在Chrome、Firefox和Safari浏览器上都能正常工作，不受macOS系统设置的影响，兼容性良好。

其核心原理是使用一个遮罩层覆盖滚动条。通过创建一个与滚动条宽度完全相同的遮罩层（这里假设宽度为17px，实际宽度可能需要通过脚本计算），并设置足够的高度，可以完美地隐藏滚动条。甚至可以对遮罩层的定位进行过渡动画，模拟渐隐渐现的效果，非常巧妙。

值得注意的是，这指的是元素的原生滚动条，而不是伪造的滚动条。伪造滚动条也是一种可行方案，Ben Nadel曾介绍过Slack是如何实现的。Slack的方法是将滚动条强制渲染到一个被overflow属性隐藏的区域，然后创建一个虚拟滚动条来模拟原生滚动条，从而获得对滚动条的更多控制。这与强制渲染滚动条是不同的方法。此外，此方法并不妨碍你对滚动条进行样式设置，这可能带来一些好处，例如精确指定滚动条的宽度。

1. 截至本文撰写时，macOS的说明为：“如果您的设备支持手势操作，滚动条会在您开始滚动之前隐藏。否则，它们将可见。”

以上是盘旋在悬停的滚动条的详细内容。更多信息请关注PHP中文网其他相关文章！