overflow-xをautoに変更せずにoverflow-y scrollを行う方法は？

Question

これは重複した質問です。

以下のリンクは私が見つけた質問に最も近い答えです。このリンクで

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

、W3C specは言う：

'オーバーフロー-X' と 'オーバーフロー-Y' の計算値は、いくつかのことを除いて、 その指定された値と同じです'visible'と 'visible'の組み合わせは使用できません。 'visible'と ' 'と 'scroll'または 'auto'の組み合わせの場合、 'visible'は 'auto'に設定されます。 'overflow-y'が同じ場合、計算された 'overflow-x'の値と等しい 'overflow'の値は、 です。それ以外の場合は、 'overflow-x'と 'overflow-y'の計算値のペア です。

私が知りたいことは、この新しい解決策があることです。

The problem of mine is in this fiddle.

私は「ブートストラップ」シンプルな鉱山のフィドル中の「サイドバー」クラスを作りました。

overflow-x: visible; 
//overflow-y: scroll; 

私は、CSS部分の '.panel'クラスの 'overflow-y：scroll'をコメントアウトしたことが分かります。

この場合、「ホバー」は機能しますが「スクロール」は機能しません。

コメントをクリアすると、「ホバー」は機能しませんが、「スクロール」はできます。

私が見たいものは、「ホバー」と「スクロール」が一緒に働くことです。

これを修正する方法やアイデアはありますか？

この問題を解決する方法はまだありますか？

Answer 1

私は 'DIV' と 'UL' の間の 'DIV' を追加することでこれを解決してきました。

And here's my final fiddle which works almost fitting with my intent。

<div class="panel">   // added div 

私はこの作業が誰にとっても役立つことを願っています。 :)

Answer 2

コードが機能しています。ブロックに設定した幅が50pxであるため、ホバーが表示されないため、位置を設定してもホバーが表示されます。あなたが同じ幅を望んでいることを知りたいと思っていること、またはデモ目的のために設定したことです。

Answer 3

jQueryを使用して、イベントに応じて.panelのオーバーフローを変更することができます。

絶対にあなたはまた、CSSハックの少しを必要とする、

が更新JSfiddleを参照してください。

Answer 4

この質問が好きでした。

だから、私はここでフィドルを作成しました：https://jsfiddle.net/n4tvvora/4/

そのあなたは（私が思う）必要なものにかなり近づきます。それがあなたの要件に合っていないかどうか私に教えてください。私たちはそれをより良くすることができます。

コードのハイライト：

.panel:hover ul.list:first-child { 
    position: absolute; 
    display: inline-block; 
    height: 100%; 
    width: auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

.panel ul.list:first-child { 
    display: block; 
}