15

I'm using -webkit-scrollbar and what I want to happen is the scrollbar hidden on page load, and it stays hidden until you hover over the container div it is attached to. When you are hovering over a scrollable area, it would appear.

I tried adding :hover and :focus affects to various divs and rules in my CSS with no luck.

Is there a way to do what I'm referring to using -webkit-scrollbar? I could post code, but its pretty straightforward. Just one outer div with the css rules attached to it, then one inner div with set height and width. Then the css rules for -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;
}
4

5 回答 5

39

我似乎已经通过了 css 中的自动隐藏功能。我以某种方式在我的应用程序上做到了，并且正在寻找我是如何得到它的。这是@tim 对现有小提琴的修改

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

这可以解决问题：

body {overflow-y:hidden;}
body:hover {overflow-y:scroll;}
于 2013-02-07T13:39:41.897 回答
5

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

例如。如果你有一个#content-wrapper滚动的 divbackground-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。

于 2013-07-28T20:04:41.847 回答
3

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

http://rocha.la/jQuery-slimScroll

于 2012-05-07T19:43:58.903 回答
3

在 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 样式中的一种，那么您需要全部使用它们，否则它们将不会被应用。

于 2012-12-20T00:08:15.290 回答
1

看到这个工作演示： http: //jsfiddle.net/trpeters1/4RSbp/3/ ，它是从这里派生的：

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

于 2012-05-07T19:11:02.617 回答