Autohide Scrollbars - 仅在必要时显示

I would like to know how to achieve a autohiding scrollbar - meaning that the scrollbar would be only visible when actively scrolling. Similar the scrollbar used on most sites (including *) and Android.

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

I was only able to achieve this myself by creating a fixed element which is positioned on top of the scrollbar and using Javascript to listen to the scroll event and then adjust its opacity. Although this works, I believe a simpler, pure CSS solution to this is possible.

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

I've tried to figure this out myself, but inspecting the scrollbar styles is painful and I've not made much progress. Is this behaviour OS specific?

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

The property I am looking for would be similar to this in functionality, but needless to mention work across browsers: https://msdn.microsoft.com/en-in/library/windows/apps/hh441298.aspx

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

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

Thanks in advance for the response.

在此先感谢您的回复。

1 个解决方案

#1

To answer my own question:

回答我自己的问题:

There were some custom styles on the page which were causing an issue for me. The following property will tell the browser to use a custom scrollbar causing WebKit to turn off its built-in scrollbar.

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

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

The property ::-webkit-scrollbar-thumb will allow you to style the scroller, although I believe there is no psuedo class which will allow you to make it disappear when the page is not scrolling. This leads me to believe that you cannot have custom scrollbars in webkit that can autohide (unless we use the JS based approach)

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

#1