如何在静态时隐藏Chromium中的滚动条，但在滚动时显示？

Question

静态时是否可以隐藏滚动条，滚动时是否显示？

我根据此post尝试了以下css，但滚动条在滚动期间不会显示。

::-webkit-scrollbar { 
  display: none; 
}

还有另一个post在Firefox上实现了类似的功能，但不是Chromium。

最好是通过css实现此功能。

Answer 1

设置一个计时器以显示滚动条，并在滚动事件重置计时器并显示滚动条：

var el = document.body; // you can use the following code on any element
var showScrollbarTimeout = 0; // track the timeout function so that we can reset it later

function hideScroll () { el.style.overflow = "hidden"; }
function showScroll () { el.style.overflow = "visible"; }

function hideLater () { showScrollbarTimeout = setTimeout(hideScroll, 1000); }

hideLater();

el.onscroll = function () {
    clearTimeout(showScrollbarTimeout);
    showScroll();
    hideLater();
}