ホバーのためにクロムのスクロールが機能しない

私はこの問題をクロームで直面しています。私がやったことはホバーのためにクロムのスクロールが機能しない

です。ホバー上のボタンはdivを表示します。 divにはスクロールバーがありますが、スクロールでマウスオーバーするとdivを隠します。私は問題が何であるかわからないが、それはFirefox、IE11とEdgeで正常に動作しているようだ。それはOperaとChromeでうまく動作しません。理解を深めてください。

#container { 
 
    display:none; 
 
    width:100%; 
 
    height:200px; 
 
    background-color: red; 
 
    position:absolute; 
 
    overflow:auto; 
 
} 
 
#parent:hover #container { 
 
    display: block; 
 
} 
 
body { 
 
    overflow:auto; 
 
    height:600px; 
 
}

<div id="parent"> 
 
    <button> 
 
    test 
 
    </button> 
 

 
    <div id="container"> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
    </div> 
 
</div>

出典

2017-02-17 Saleem Khan

このデモを試してみてください？ – ProEvilz

私は彼がコンテナ内のスクロールバーの上にマウスを置くと、コンテナが隠れることを意味すると思います。 – jao

ありがとうJao。あなたの正しい –

あなたはそれが原因それはOSによって隠さ取得するかもしれない

#container { 
 
    display:none; 
 
    width:100%; 
 
    height:200px; 
 
    background-color: red; 
 
    position:absolute; 
 
    overflow:auto; 
 
    right:0; 
 
} 
 
#parent:hover #container { 
 
    display: block; 
 
} 
 
body { 
 
    overflow:auto; 
 
    height:600px; 
 
}

<div id="parent"> 
 
    <button> 
 
    test 
 
    </button> 
 

 
    <div id="container"> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
     <div> 
 
     some content 
 
     </div> 
 
    </div> 
 
</div>

出典

2017-02-17 19:33:24 ose

Ose私は絶対的な位置が必要で、相対的に変更した後でさえも機能しません。 –

が更新されました。コードを実行 – ose

Nopeは動作しません –

、コンテナの位置は絶対たくない場合。

これをCSSで上書きします。

#container::-webkit-scrollbar { 
    -webkit-appearance: none; 
} 

#container::-webkit-scrollbar:vertical { 
    width: 11px; 
} 

#container::-webkit-scrollbar-thumb { 
    border-radius: 8px; 
    border: 2px solid white; /* should match background, can't be transparent */ 
    background-color: rgba(0, 0, 0, .5); 
}

あなたはdivの内側にスクロールしようとすると、div要素を非表示になったわけでください http://jsfiddle.net/Eh7xT/1130/

出典

2017-02-17 19:48:04 ProEvilz

ホバーのためにクロムのスクロールが機能しない

答えて

関連する問題