CSS背景颜色被Chrome浏览器上的滚动条擦除

Posted 2023-02-21

【中文标题】CSS背景颜色被Chrome浏览器上的滚动条擦除

【英文标题】：CSS background color is erased by scroll bar on Chrome browser

【发布时间】：2013-12-11 06:36:32

【问题描述】：

我有一个指定高度的容器，里面堆放着物品。默认情况下，我将溢出项设置为隐藏，一旦鼠标悬停，我就会启用容器以显示滚动条。 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 上。任何想法？

Demo

【参考方案1】：

试试这个代码：

DEMO

#container:hover .item
    width:auto;


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

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

【讨论】：

谢谢！你的解决方案对我很有帮助。