CSSオーバーフローを使用した垂直スクロールバーの自動隠蔽

Question

垂直スクロールバーを自動的に隠すためのCSSオーバーフローを使用して問題が発生しました。私はこの動作を達成するためにCSSのホバー擬似クラスを使用するいくつかの記事を読んで、良いことは私がある程度成功している。

オーバーフロー-yプロパティに 'scroll'と 'auto'の両方を使用しました。スクロールでは魅力的に機能しますが、 'スクロール'ではスクロールバーを表示する必要がない場合でも、「自動」が非常にうまくいくと感じます。

もう一度 'auto'を指定すると、右側に16px（私が推測する）のギャップがあります。おそらくそれはスクロールバーの幅です。私は全幅が欲しかった。私は自分の問題を説明するために背景を使いました。

ここはフィドルです。 http://jsfiddle.net/9scJE/

div.autoscroll { 
    height: 200px; 
    width: 400px; 
    overflow: hidden; 
    border: 1px solid #444; 
    margin: 3em; 
} 

div.autoscroll:hover { 
    /* overflow-y: scroll; */ 
    overflow-y: auto; 
} 

ありがとうございました。

Answer 1

これは実際に私には、ブラウザのバグのように思えるが、あなたが望むようにあなたならば動作しているようですホバーにpadding-right: 1pxを追加してください。

div.myautoscroll:hover { 
    overflow: auto; 
    padding-right: 1px; 
} 

http://jsfiddle.net/ExplosionPIlls/9scJE/1/

Answer 2

のdivのホバーするときは、width: 100%;を追加することができます。

div.myautoscroll:hover { 
    overflow: auto; 
    width: 100%; 
} 

Working Demo

Answer 3

あなたはパディングしてスクロールバーを補う必要があります。

div.autoscroll:hover { 
    /* overflow-y: scroll; */ 
    overflow-y: scroll; 
padding-right: 16px; 

} 

ただし、ブラウザ間でスクロールバーの幅がわずかに異なる可能性があるので、javascriptでこれを行う方が良いです。私は成功とこのソリューションを使用しました：How to calculate the width of the scroll bar?