CSS webkit 滚动条显示/隐藏

Question

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

我尝试将 ：hover 和 ：focus 影响添加到我的 CSS 中的各种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

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;
}

F.Y.I.您可以将拇指的不透明度设置为零(而不是匹配背景颜色(，但不透明度似乎也适用于页面上的其他滚动条。

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

Answer 3

我最终选择了slimscroll javascript插件。拥有一个全 css 解决方案会很酷，但这个插件做得很好，并且允许焦点显示/隐藏的想法。

http://rocha.la/jQuery-slimScroll

Answer 4

在webkit中隐藏滚动拇指是不直观的！我的页面需要隐藏所有默认的浏览器滚动功能，以实现我们自己的"无限滚动"效果。 唯一困难的是webkit"拇指"覆盖层，它仅在屏幕运动时显示(例如使用鼠标滚轮滚动(。

为了隐藏这个webkit滚动拇指，我们必须将一些样式应用于"所有"滚动拇指，然后将隐藏效果应用于我的特定拇指(我们必须以编程方式执行此操作，因为我们不确定内容是否足够长，可以在页面加载之前执行自定义滚动效果(。

这些是我们使用的样式：

::-webkit-scrollbar { /* required, although an apparent no-op */
    color: inherit;
}
::-webkit-scrollbar-thumb { /* leave most bars alone */
    background-color: grey;
}
#customScrollDiv::-webkit-scrollbar-thumb { /* this is the one we care about */
    background-color: grey;
}
.hideThumb::-webkit-scrollbar-thumb { /* we apply the style to actually hide it*/
    display: none; 
}       
.hideThumb { /* required, although an apparent no-op */
    background-color: white;
}

然后，当我确定要以编程方式隐藏该 thumbHandle 时，我可以使用 jquery： $('#customScrollDiv').toggleClass('hideThumb');

棘手的部分是，您需要大量通常开箱即用的CSS样式的"默认"，但是一旦您开始指定上面的Webkit样式之一，那么您就需要全部使用它们，否则它们将不会应用。

Answer 5

看这个工作演示：http://jsfiddle.net/trpeters1/4RSbp/3/从这里派生出来：

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