html - CSS webkit 滚动条显示/隐藏

Question

我正在使用 -webkit-scrollbar 并且我想要发生的是页面加载时隐藏的滚动条，并且它保持隐藏状态直到您将鼠标悬停在它所附加的容器 div 上。当您将鼠标悬停在可滚动区域上时，它就会出现。

我尝试在我的 CSS 中添加 :hover 和 :focus 影响各种 div 和规则，但没有成功。

有没有一种方法可以使用 -webkit-scrollbar 来完成我所指的事情？我可以发布代码，但它非常简单。只有一个附加了 css 规则的外部 div，然后是一个设置了高度和宽度的内部 div。然后是 -webkit-scrollbar 的 css 规则。

#u #trail ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
#u #trail ::-webkit-scrollbar-button:start:decrement,
#u #trail ::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 0;
    background-color: transparent;
}
#u #trail ::-webkit-scrollbar-track-piece {
    background-color: #FAFAFA;
    -webkit-border-radius: 0;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
}
#u #trail ::-webkit-scrollbar-thumb:vertical {
        height: 50px;
        background-color: #999;
        -webkit-border-radius: 8px;
}
#u #trail ::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background-color: #999;
    -webkit-border-radius: 8px;
}
#u #trail-overflow {
    width: 860px;
    max-height: 500px;
   overflow: auto;
}

Answer 1

我似乎已经解决了 css 中的自动隐藏问题。我以某种方式在我的应用程序上做了它，并正在搜索我是如何得到它的。在这里，@tim 对现有 fiddle 的修改

http://jsfiddle.net/4RSbp/165/

这就是诀窍:

body {overflow-y:hidden;}
body:hover {overflow-y:scroll;}