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来实现此目的。

EG。如果您有一个以#content-wrapper

滚动的div 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。您可以将拇指的不透明度设置为零（而不是匹配背景颜色），但不透明度似乎也适用于页面上的其他滚动条。

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

Answer 3

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

http://rocha.la/jQuery-slimScroll

Answer 4

请参阅此工作演示：http://jsfiddle.net/trpeters1/4RSbp/3/ 这是从这里得出的：

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

Answer 5

隐藏webkit中的scrollthumb是不直观的！我的页面需要隐藏所有默认的浏览器滚动功能，以便实现我们自己的无限滚动＆＃39;效果。唯一困难的是webkit＆＃34; thumb＆＃34;叠加，仅在屏幕运动时显示（如使用鼠标滚轮滚动）。

为了隐藏这个webkit scrollthumb，我们必须将一些样式应用到＆＃34; all＆＃34; scrollthumbs，然后将隐藏效果应用到我的特定拇指（我们必须以编程方式执行此操作，因为我们不确定内容是否足够长，以便在页面加载之前执行自定义滚动效果）。

这些是我们使用的样式：

::-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');

棘手的部分是你需要很多＆＃34;默认＆＃34;您通常开箱即用的CSS样式，但是一旦您开始指定上述其中一个webkit样式，那么您需要全部或者它们不会被应用。

CSS webkit滚动条显示/隐藏

5 个答案: