滾動不可用於懸停的Chrome瀏覽器

懸停按鈕顯示一個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。您的正確 –

如果你不想絕對集裝箱位置

，

#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我需要的位置是絕對的，它不工作，即使更改爲相對 –

更新後，嘗試此權利：0;運行代碼 – 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裏面滾動試試這個演示 http://jsfiddle.net/Eh7xT/1130/

來源

2017-02-17 19:48:04 ProEvilz

滾動不可用於懸停的Chrome瀏覽器

回答

相關問題