只有在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