你能避免限制可滚动容器的背景颜色吗？

Question

我正在努力使半个相对定位的 div 具有一种特定的颜色。

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

应该提到的是，我之所以不简单地创建 2 个 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

欢迎来到 SO！

I used linear-gradient on content to achieve this 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>

你能避免限制可滚动容器的背景颜色吗？

Can you avoid having a limit on a background-color of a scrollable container?

html

css

scroll

background

position