使用伪元素叠加滚动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

根据评论进行编辑：

您可以将其固定在展开的内容尺寸上。文本可以是动态的。

.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>

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。这样做的缺点是其他属性将使用 window 作为基础而不是父元素来设置。所以我们修复它，为了将位置设置为与您的 div 相同，我们删除了 top 和 left 属性并将 after 更改为 before。为了使它的大小相同，我们使用 inherit，因为 100% 将是 window 的 100%。

编辑

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

如果我要为客户的站点执行此操作，我想我会创建一个包含两个子项的父项 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

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>

使用伪元素叠加滚动div

Use pseudo-element to overlay a scrolling div

css

pseudo-element