html - 带有 x 滚动的 CSS 绝对位置

Question

这是例子:

https://jsfiddle.net/yaxfnmtn/

我有一个 div，我想在上面画一些条纹。它工作正常，除非我在 div 上滚动 x，在那里我再也看不到它们了。这是 HTML 代码:

<div class="outer">
  <div class="bg"></div>
  <div class="inner"></div>
</div>

还有 CSS:

.outer {
  width: 300px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid black;
  position: relative;
}

.inner {
  width: 1000px;
  height: 200px;
}

.bg {
  background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
  background-size: 100% 0.7em;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

这是我要实现的目标的一个非常简化的版本。将其设置为 position: fixed 似乎不是一个选项？

Answer 1

这是不可能的。

当您为子项分配 100% 宽度时，这意味着父项宽度不是文档。

除了让父溢出的是<div class="inner">宽度为 1000xp，其中条纹分配给 <div class="bg">其宽度为 100%，等于父级的宽度。

因此，改为将 strippes 应用于 .outer，当子项溢出时，它将保持背景。

.outer {
  width: 300px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid black;
  position: relative;
  background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
  background-size: 100% 0.7em;
}

.inner {
  width: 1000px;
  height: 200px;
}

.bg {

  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

<div class="outer">
  <div class="bg"></div>
  <div class="inner"></div>
</div>