CSS webkit滚动条显示/隐藏 [英] CSS webkit scrollbar show/hide

问题描述

我使用-webkit滚动条，我想要发生的是滚动条隐藏的页面加载，它保持隐藏，直到你悬停在其附加到的容器div。

我尝试添加：hover和：focus会影响我的CSS中的各种div和规则，没有运气。 / p>

有没有办法做我所指的使用-webkit-scrollbar？我可以post代码，但它很简单。只有一个外部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 {
显示：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：horizo​​ntal {
 width：50px; 
 background-color：＃999; 
 -webkit-edge-radius：8px; 
} 
 #u＃trail-overflow {
 width：860px; 
 max-height：500px; 
 overflow：auto; 
} 
  

解决方案

在css的自动隐藏的东西。我不知怎的在我的应用程序，它正在搜索我是如何得到它。在这里，通过@tim修改现有的小提琴

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

这样做：

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

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

解决方案

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

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

This does the trick:

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

这篇关于CSS webkit滚动条显示/隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！