使用伪元素覆盖滚动的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>

Answer 2

tl.dr. 更改after为before、删除top和left属性并继承width和height并更改position为fixed。

示例后的解释。

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

.wantOverlay::before {
  content: '';
  position: fixed;
  width: inherit;
  height: inherit;
  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>

那么，这里发生了什么：
您想要一个固定的行为，所以我们将位置更改为fixed。这样做的缺点是其他属性将使用窗口作为基础而不是父元素来设置。top因此我们修复了它，将位置设置为与我们删除的 div 相同的位置left，并更改afterfor before。为了使其inherit与我们100%使用的100%窗口大小相同。

编辑

警告：我写这篇文章是为了自我敢于找到一种使用固定位置的方法。实际上，我认为这不是最好的答案，因为它只有在整个页面没有滚动的情况下才有效。如果发生这种情况，灰色方块将始终位于窗口的同一位置，而内容将上下移动。

如果我要为客户的网站执行此操作，我想我会创建一个带有两个子项（内容和覆盖层）的父 div。如果你想保持滚动功能，你可以使用pointer-events:none;覆盖层上的 css 属性。