您能避免对可滚动容器的背景颜色进行限制吗？

Question

我试图使它的一半相对定位的div有一个特定的颜色。

我尝试创建另一个div并将其放置在宽度为50%的绝对位置，并将其放置在右边，但我遇到的问题是，由于我的内容是可滚动的，每当我到达它开始滚动的位置时，该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>

​

Answer 1

欢迎来到这里！

我在内容上使用了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>

​