Chrome浏览器中的滚动条会覆盖CSS背景颜色

Question

Chrome浏览器中的滚动条会覆盖CSS背景颜色

htmlcssgoogle-chromescrollbarbackground-color

3

我有一个指定高度的容器，容器内部有堆叠的项目。默认情况下，我将溢出的项目设置为隐藏状态，一旦鼠标悬停在容器上，我就启用容器显示滚动条。

HTML代码：

#container {
  width: 200px;
  background-color: gray;
  height: 200px;
  overflow-y: hidden;
}
#container:hover {
  overflow-y: auto;
}
.item {
  margin-top: 2px;
  margin-bottom: 2px;
  background-color: yellow;
}

<div id="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>

除了在Chrome浏览器中鼠标移出容器后滚动条消失并且滚动条区域的背景色被擦除之外，它按照我所希望的方式工作。这只会在Chrome浏览器上发生。有任何想法吗？

演示

- Shuping

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohsen Safari · Accepted Answer

试试这段代码：

演示

#container:hover .item{
    width:auto;
}

.item {
    margin-top:2px;
    margin-bottom: 2px;
    background-color: yellow;
    width:200px;
}

你也可以使用100%代替200px。