css - 使用伪元素覆盖滚动的div

Question

我想用伪元素覆盖覆盖动态滚动内容的 div。
我遇到的问题是覆盖滚动内容，使折叠下方的所有内容都裸露。

如何让叠加层在其下方的内容滚动时保持原位？

.wantOverlay {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
  position: relative;
}

.wantOverlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(150, 150, 150, .45);
}

<div class="wantOverlay">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed est vel ante faucibus tempor nec id.</div>
  <div>Unfortunately any text past this point no longer has the overlay.</div>
  <div>This text no longer has the overlay.</div>
</div>

Answer 1

position: sticky; 带有负 margin-top 就可以了。这是有关 sticky 的详细信息 https://developer.mozilla.org/tr/docs/Web/CSS/position

.wantOverlay {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
  position: relative;
}

.wantOverlay::after {
  display: block;
  content: ' ';
  position: sticky;
  left: 0;
  top: 0;
  margin-top: -100%;
  width: 100%;
  height: 100%;
  background: rgba(150, 150, 150, .45);
}

<div class="wantOverlay">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed est vel ante faucibus tempor nec id.</div>
  <div>Unfortunately any text past this point no longer has the overlay.</div>
  <div>This text no longer has the overlay.</div>
</div>