Question

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

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

我自己试图解决这个问题，但检查滚动条样式很痛苦，而且我没有取得多大进展。这种行为操作系统是否具体？

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

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

提前感谢您的回复。

Answer 1

回答我自己的问题：

页面上有一些自定义样式对我造成了问题。以下属性将告诉浏览器使用自定义滚动条导致WebKit关闭其内置滚动条。

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

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