Chrome浏览器上的滚动条会清除CSS背景颜色 [英] CSS background color is erased by scroll bar on Chrome browser

问题描述

我有一个具有指定高度的容器，其内部是堆叠的。默认情况下，我将溢出项设置为隐藏，一旦鼠标悬停，我使容器显示滚动条。

HTML

  #container {width：200px;背景颜色：灰色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>项目2< / div> < div class =item>第3项< / div> < div class =item>第4项< / div> < div class =item>项目5< / div> < div class =item>第6项< / div> < div class =item>项目7< / div> < div class =item>第8项< / div> < div class =item>第9项< / div> < div class =item>第10项< / div>< / div>  

它希望除了在Chrome浏览器上，鼠标移出容器和滚动条消失后，滚动条区域的背景颜色被删除，我希望除外。这只会发生在Chrome上。任何想法？

演示

解决方案

请尝试以下代码：

DEMO

  #container：hover .item {
 width：auto; 
} 
 
 .item {
 margin-top：2px; 
 margin-bottom：2px; 
 background-color：yellow; 
 width：200px; 
} 
  

您可以使用 100％而不是 200px 。

I have a container with specified height, and inside it items are stacked. By default, I set overflow items as hidden and once mouse hover I enable the container to show scroll bar.
The 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>

It works as I wished except on Chrome browser after mouse moving out the container and scroll bar is disappear, the background color of scroll bar region is erased. This happens only on Chrome. Any idea?

Demo

解决方案

try this code:

DEMO

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

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

you can use 100% instead 200px too.

这篇关于Chrome浏览器上的滚动条会清除CSS背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！