使用伪元素覆盖滚动的 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 可以解决问题。这里是关于stickyhttps://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.博士。将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。这带来了一个缺点，即其他属性将使用窗口作为基础而不是父元素来设置。所以我们修复它，将位置设置为与您的 div 相同的位置，我们删除top 和left 属性并将after 更改为before。为了使其大小相同，我们使用inherit，因为100% 将是窗口的100%。

编辑

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

如果我要为客户的网站执行此操作，我想我会创建一个包含两个孩子的父 div，即内容和覆盖。如果您想保持滚动功能，您可以在叠加层上使用 css 属性 pointer-events:none;。

Answer 3

您可以使用巨大的box-shadow 传播值，以及您想要的背景，例如：

  box-shadow: 0 0 0 10000px rgba(150, 150, 150, .45);

这将涵盖所有内容，但由于box-shadow 无法影响布局，因此不会增加滚动高度。

注意：这是一种可能会影响性能的 hack，因此请谨慎使用。

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

.wantOverlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  box-shadow: 0 0 0 10000px 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>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 4

根据评论编辑：

您可以使用展开的内容尺寸固定它。文本可以是动态的。

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

.wantOverlay::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(150, 150, 150, .45);
  height: 100px;
  margin-top: 8px;
  width: 200px;
}

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

更少的文字：

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

.wantOverlay::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(150, 150, 150, .45);
  height: 100px;
  margin-top: 8px;
  width: 200px;
}

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