CSS webkit滚动条的显示/隐藏

Question

我正在使用 -webkit-scrollbar，希望在页面加载时隐藏滚动条，并且只有在鼠标悬停在容器div上时才会显示滚动条。我尝试通过在我的CSS中的各个div和规则中添加:hover和:focus效果，但没有成功。

是否有一种方法可以使用 -webkit-scrollbar 来实现我所说的功能？我可以发布代码，但它非常简单。只有一个外部div附加了CSS规则，然后是一个设置高度和宽度的内部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;
}

- jz3

---

从用户界面的角度来看，不向用户“展示”可滚动内容是不好的吗？给他一种“眼睛所见不及”的感觉呢？ - balexandre

你是否愿意采用JS解决显示/隐藏行为的问题？ - tim peterson

我想一个JS解决方案不是问题，虽然如果有可能，我显然更喜欢CSS。 - jz3

为什么不将 overflow:hidden 设置为默认值，然后在鼠标悬停时使用 overflow:auto？ - Achshar

Answer 1

我好像成功使用css的自动隐藏功能了。我在我的应用程序上不知怎么做到了，然后搜索了我是如何做到的。这就是它，通过对@tim的现有小样式进行修改。

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

这就是解决方法:

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

- Dragunov

---

这个人获得了金星。 - a paid nerd

您需要添加height:100%;（或实际高度）以使其在Firefox中正常工作 ----- #id_scroll_area { height:100%; overflow:hidden;} #id_scroll_area:hover{overflow-y:auto;} - skidadon

如果滚动条出现，我该如何消除或重新排列内容文本？ - L. Kvri

不适用于移动设备。 - Junior Usca

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的背景颜色相匹配。

- Markus Coetzee

Answer 3

我最终选择了 slimscroll JavaScript 插件。虽然全 CSS 解决方案很酷，但是这个插件做得非常好，可以实现焦点显示/隐藏的想法。 http://rocha.la/jQuery-slimScroll

- jz3

Answer 4

隐藏webkit中的滚动条非常不直观！我的页面需要隐藏所有默认浏览器滚动条，以实现我们自己的“无限滚动”效果。唯一困难的是webkit“thumb”叠加层，只有在屏幕处于运动状态（如使用鼠标滚轮滚动）时才会显示出来。

为了隐藏这个webkit scrollthumb，我们必须对“所有”scrollthumbs应用一些样式，然后将隐藏效果应用于我的特定thumb（我们必须以编程方式进行此操作，因为在页面加载之前，我们无法确定内容是否足够长，以执行自定义滚动效果）。

这些是我们使用的样式：

::-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样式，那么您就需要它们全部，否则它们将不会应用。

- Leo Lansford

Answer 5

请查看这个工作演示：http://jsfiddle.net/trpeters1/4RSbp/3/，它是从这里衍生出来的：

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

- tim peterson

---

是的，抱歉我还在努力中...给我一秒钟..., 我正在尝试CSS和JS两种策略... - tim peterson

我测试了slimscroll js插件，它的效果非常好，所以我可能会使用它。请查看下面的答案。再次感谢您的努力。 - jz3

好的，是的，这很棘手，我没能及时搞定。感谢你提供关于slimscroll插件的提示！ - tim peterson

这是一个看起来应该有简单解决方案的问题，但实际上比它看起来的要难。 - jz3

@Sodhisaab ::webkit不是这些浏览器的一部分。 - serdar.sanri