滚动不可用于悬停的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浏览器

回答

相关问题