自动隐藏滚动条-只在必要时显示

Autohide Scrollbars - Show only when necessary

本文关键字：显示 -只 隐藏 滚动条      更新时间：2023-09-26

我想知道如何实现自动隐藏滚动条-这意味着滚动条只在主动滚动时可见。类似于大多数网站(包括Stackoverflow)和Android上使用的滚动条。

我只能通过创建一个固定元素来实现这一点，该元素位于滚动条的顶部，并使用Javascript来侦听滚动事件，然后调整其不透明度。虽然这是可行的，但我相信一个更简单的纯CSS解决方案是可能的。

我试着自己弄清楚，但检查滚动条样式是痛苦的，我没有取得多大进展。这种行为是特定于操作系统的吗?

我正在寻找的属性将在功能上类似于此，但不必提及跨浏览器的工作:https://msdn.microsoft.com/en-in/library/windows/apps/hh441298.aspx

-ms-overflow-style: -ms-autohiding-scrollbar

提前感谢您的回复。

回答我自己的问题:

页面上有一些自定义样式，这对我来说是一个问题。下面的属性将告诉浏览器使用自定义滚动条，导致WebKit关闭其内置滚动条。

::-webkit-scrollbar {
    width: 40px;
}

属性::-webkit-scrollbar-thumb将允许您设置滚动条的样式，尽管我相信没有伪类允许您在页面不滚动时使其消失。这让我相信你不能在webkit中拥有可以自动隐藏的自定义滚动条(除非我们使用基于JS的方法)

相关文章：