Html CSS webkit 滚动条显示/隐藏

CSS webkit scrollbar show/hide

提问by jz3

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.

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

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

我尝试将 :hover 和 :focus 影响添加到我的 CSS 中的各种 div 和规则，但没有运气。

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.

有没有办法使用-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;
}

回答by Dragunov

I seem to have got through the auto hide thing in css. I somehow did it on my app, and was searching how I got it. Here it is, a modification to the existing fiddle by @tim

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

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

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

This does the trick:

这是诀窍：

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

回答by Markus Coetzee

You can use simple CSS to achieve this.

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

Eg. if you have a div #content-wrapperthat scrolls with background-color: rgb(250, 249, 244);

例如。如果你有一个#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;
}

F.Y.I. You could set the thumb's opacity to zero (instead of matching the background color), but the opacity seems to then apply to other scrollbars on the page as well.

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

P.S. This assumes that you're ::-webkit-scrollbar-track's background color also matches the #content-wrapper's background color.

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

回答by jz3

I ended up going with the slimscroll javascript plugin. It would be cool to have an all-css solution, but this plugin is done very well, and allows the focus-shown/hidden idea.

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

http://rocha.la/jQuery-slimScroll

http://rocha.la/jQuery-slimScroll

回答by Leo Lansford

Hiding the scrollthumb in webkit is non-intuitive! My page needed to hide all default browser scroll features in order to implement our own 'infinite scroll' effects. The only thing that was hard was the webkit "thumb" overlay, which only shows up while the screen is in motion (like scrolling with the mousewheel).

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

In order to hide this webkit scrollthumb we had to apply some styles to "all" scrollthumbs, and then apply the hiding effects to my specific thumbs (we have to do this programmatically because we're not sure if the content is long enough to do our custom scroll effects until the page has loaded).

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

These are the styles we used:

这些是我们使用的样式：

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

then, when i determine that i want to programmatically hide that thumbHandle i can do it with jquery: $('#customScrollDiv').toggleClass('hideThumb');

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

The tricky part is that you need a lot of "defaulting" of CSS styles that you normally got out of the box, but once you start specifying even one of these webkit styles above then you need THEM ALL or they won't be applied.

棘手的部分是您需要大量“默认”的 CSS 样式，这些样式通常是开箱即用的，但是一旦您开始指定以上这些 webkit 样式中的一种，那么您就需要它们全部，否则它们将不会被应用。

回答by tim peterson

see this working demo: http://jsfiddle.net/trpeters1/4RSbp/3/which was derived from here:

看到这个工作演示：http: //jsfiddle.net/trpeters1/4RSbp/3/来自这里：

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

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