你能避免限制可滚动容器的背景颜色吗？ [复制]答案

【问题标题】：Can you avoid having a limit on a background-color of a scrollable container? [duplicate]你能避免限制可滚动容器的背景颜色吗？ [复制]
【发布时间】：2020-02-03 00:48:19
【问题描述】：

我正在尝试使相对定位的 div 的一半具有一种特定的颜色。

我尝试创建另一个 div 并将其放置在绝对位置，宽度为 50% 并放置在右侧，但我遇到的问题是，由于我的内容是可滚动的，所以每当我到达它开始滚动的位置时，该 div 的背景停止。

应该提到，我之所以不简单地创建 2 个 div，每个 div 都有一种颜色，是因为我也将内容放在了中间。

有没有办法解决这个问题？

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  overflow-y: auto;
}

.right-section-background {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  background: yellow;
}

.content {
  position: absolute;
}

<div class="wrapper">
  <div class="right-section-background"></div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
  </div>
 </div>

【问题讨论】：

所以基本上你想用两种颜色为元素的背景着色？
@TemaniAfif 是的，这正是我想要做的。基本上，如果您查看 sn-p，我希望黄色框进一步向下延伸以在您滚动时碰到容器的底部而不是被剪掉。
这对你有用吗：jsfiddle.net/unb1mv0a ?
@TemaniAfif 在.content 类而不是.wraper 类上使用background-image 将向我们展示均匀分布的背景颜色，因为.wraper 具有overflow:scroll，因此它的宽度看起来更小容器的 50%。那我说得对吗？
感谢你们两位，使用线性渐变是一个聪明的工作，我没有想到它。这解决了我想做的事情！

标签： html css scroll background position

【解决方案1】：

欢迎来到 SO！

我在内容上使用了linear-gradient 来实现这个background-image: linear-gradient(to right, red 50%, yellow 50%);

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  overflow-y: auto;
}


.content {
  position: absolute;
  background-image: linear-gradient(to right, red 50%, yellow 50%);
}

<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
  </div>
 </div>

【讨论】：