使用伪元素覆盖滚动的 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.dr. 更改before的after，删除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属性，并更改了before的after。为了使它的大小相同，我们使用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无法影响布局，因此不会增加滚动高度。

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

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