[3个示例]默认隐藏滚动条，鼠标悬停时显示
作者:admin 时间:2023-4-14 16:45:28 浏览:本文介绍3种默认情况下隐藏滚动条的方法，只有在元素悬停时才显示它们。
示例1
默认情况下隐藏滚动条，只有在元素悬停时才显示。
经测试，它可以在 Chrome、Firefox 和 Safari 上运行，非常坚固。
诀窍是mask覆盖滚动条！所以，如果你创建一个mask与滚动条一样宽（在本示例里，只是猜测 17px 会覆盖它）和超高（两者都应该由脚本计算），它可以完美地覆盖滚动条。
值得注意的是，这是元素的真实滚动条，而不是伪造的。
另外，它是纯CSS实现，无需用到JavaScript编程。
示例2
如果有样式的滚动条是必需的，并且你需要跨浏览器完美地进行非常详细的设计控制，那么你可能需要寻求 JavaScript 解决方案。
本示例使用了一个JS插件：simplebar.js，同时有一个CSS库文件：simplebar.css，它看起来很现代，易于实例化。
需要说明的是，本示例也是跨浏览器的，各种浏览器表现相同。
效果图：
示例3
本示例使用了另一个JS插件：simple-scrollbar.js，CSS代码比上面示例2的简单多了。
本示例与上面示例2比较相近，它的滚动条颜色浅一些，鼠标悬停时鼠标形状有改变。
跟示例2一样，本示例也是跨浏览器的，各种浏览器表现相同。
效果图：
总结
本文介绍了3个默认隐藏滚动条的方法，鼠标悬停时显示它们。它们还有一个优点，就是它们是跨浏览器的，在各种浏览器里表现一样。
相关文章
相关文章
x
- 站长推荐
