只有在Div悬停时才能看到滚动条？

Question

我想弄清楚如何有一个滚动div只显示它的滚动条时，Hovered。

示例是Google图片搜索，在下面的图片中，您可以看到左侧边栏在将鼠标悬停在其上方之前不显示为可滚动。

这是可能与CSS或是否需要使用Javascript？如果可能的话，可能是一个快速的例子，如何做这样的工作

Answer 1

#div { overflow:hidden;height:whatever px; } 
#div:hover { overflow-y:scroll; } 

将类似的东西的工作？

Answer 2

我认为像

$("#leftDiv").mouseover(function(){$(this).css("overflow","scroll");}); 
$("#leftDiv").mouseout(function(){$(this).css("overflow","hidden");}); 

Answer 3

给股利一个固定的高度和srcoll：隐藏;并在悬停上将滚动更改为自动;

#test_scroll{ height:300px; overflow:hidden;} 
#test_scroll:hover{overflow-y:auto;} 

这里是一个例子。 http://jsfiddle.net/Lywpk/

Answer 4

如果你对显示/隐藏唯一关心的，该代码会工作得很好：

$("#leftDiv").hover(function(){$(this).css("overflow","scroll");},function(){$(this).css("overflow","hidden");}); 

但是，它可能修改你的设计的一些元素，如果你使用的是宽= 100％，考虑到当你隐藏滚动条时，它会为你的宽度创造更多的空间。

Answer 5

更改溢出的答案有一堆问题，如内部块的宽度不一致以及触发回流。

有是有，不会触发前所未有的回流相同的效果更简单的方法：用visibility财产和嵌套块：

.scrollbox { 
    width: 10em; 
    height: 10em; 
    overflow: auto; 
    visibility: hidden; 
} 
.scrollbox-content, 
.scrollbox:hover { 
    visibility: visible; 
} 

这里是工作示例笔：http://codepen.io/kizu/pen/OyzGXY

另一个这种方法的特点是visibility是动画的，所以我们可以添加一个转换（参见上面的笔中的第二个示例）。为UX增加一个转换会更好：当移动到另一个元素时，滚动条不会立即出现，并且在用鼠标指针定位滚动条时很难错过滚动条，因为它不会立即隐藏好。

Answer 6

针对webkit浏览器的一个技巧是创建一个不可见的滚动条，然后使其显示在悬停状态。此方法不会影响滚动区域的宽度，因为滚动条所需的空间已经存在。

事情是这样的：

.scrolling-div { 
    &::-webkit-scrollbar { 
    background-color: transparent; 
    width: 10px; 
    } 
&::-webkit-scrollbar-thumb { 
    background-color: transparent; 
} 

}

.scrolling-div:hover { 
&::-webkit-scrollbar-thumb { 
    background-color: black; 
} 

}

codepen example