Divを上に置いたときにスクロールバーを表示するだけですか？

Question

私は、Hoveredのスクロールバーのみを表示するスクロール可能なdivを持つ方法を理解しようとしています。

例は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

のようなものがdiv要素に固定の高さとsrcoll与えると思う：隠されたが、ホバー上でスクロールをautoに変更します。

#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がアニメーション可能であることです。そのため、遷移を追加できます（上記の2番目の例を参照）。スクロールバーは、別の要素に移動しているだけでホバリングしてもすぐには表示されません。マウスカーソルでスクロールバーを指定すると、スクロールバーを見逃すことは難しくなります。よく

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