Hover 显示滚动条 CSS

在浏览器中，若一个元素的内容超出了其容器的大小，则浏览器默认会显示滚动条使用户能够滑动并查看所有内容。但有时，我们可能想要将滚动条隐藏起来，等到用户真正需要滚动时再显示出来。

CSS 提供了 ::-webkit-scrollbar 伪元素来控制滚动条的外观，而使用 :hover 伪类则能让滚动条在鼠标悬停时显示出来。

通过 CSS 控制滚动条

在使用 ::-webkit-scrollbar 之前，需先将元素的滚动条设置为可见。以下是一个示例：

div {
  height: 100px;
  width: 200px;
  overflow: auto; /* 允许内容滚动 */
}

/* 显示滚动条 */
div::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar 的部分属性说明如下：

• width：滚动条的宽度
• height：滚动条的高度
• background-color：滚动条的背景色
• thumb：滚动条上拖动的滑块的样式
• thumb:hover：鼠标悬停在滑块上的样式
• track：滚动条背景的样式
• track:hover：鼠标悬停在滚动条背景上的样式
• corner：滚动条角落的样式

鼠标悬停时显示滚动条

现在我们已经让滚动条显示出来，接下来是让它在鼠标移至内容范围内时显示出来。

div::-webkit-scrollbar {
  width: 10px;
  opacity: 0; /* 先将滚动条隐藏 */
}

div:hover::-webkit-scrollbar {
  opacity: 1; /* 鼠标悬停时显示滚动条 */
}

在上面的代码中，我们使用 opacity 隐藏滚动条，然后在 :hover 伪类中将其设置为不透明，以此实现滚动条在鼠标悬停时显示。

总结

通过使用 ::-webkit-scrollbar 和 :hover 两个 CSS 特性，我们可以轻易地实现在鼠标悬停时显示滚动条的效果，这提供了一种更加优雅的用户交互方式。