CSS webkit滚动条显示/隐藏

Question

我正在使用-webkit-scrollbar,我想要发生的是页面加载时隐藏的滚动条,它会一直隐藏,直到你将鼠标悬停在它附加到的容器div上.当您将鼠标悬停在可滚动区域上时,它会出现.

我尝试添加:hover和:focus会影响我的CSS中的各种div和规则而没有运气.

有没有办法做我所指的使用-webkit-scrollbar？我可以发布代码,但它很简单.只有一个外部div与css规则相连,然后一个内部div设置高度和宽度.然后css规则为-webkit-scrollbar.

#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对现有小提琴的修改

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

这样做的诀窍:

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

Answer 2

您可以使用简单的CSS来实现。

例如。如果您有一个div #content-wrapper滚动background-color: rgb(250, 249, 244);

#content-wrapper::-webkit-scrollbar-thumb {
  background-color: rgb(250, 249, 244); /* Matches the background color of content-wrapper */
}

#content-wrapper:hover::-webkit-scrollbar-thumb {
  background-color: gray;
}

仅供参考，您可以将拇指的不透明度设置为零（而不是匹配背景色），但是不透明度似乎也将应用于页面上的其他滚动条。

PS这假设您::-webkit-scrollbar-track的背景色也与的背景色匹配#content-wrapper。

Answer 3

请参阅此工作演示： http://jsfiddle.net/trpeters1/4RSbp/3/ ，它源自此处：

http://css-tricks.com/examples/WebKitScrollbars/