滚动在chrome中无法悬停

Question

我在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>

Answer 1

可能是因为它被操作系统隐藏了。

用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);
}

试试这个演示 http://jsfiddle.net/Eh7xT/1130/

Answer 2

如果您不希望容器位置绝对，

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;