我想为cover元素设置与container元素的scrollwidth和scrollheight相同的宽度和高度。 所以在滚动过程中，它将完全覆盖容器。 此时，它使用滚动裁剪的容器元素的width和height。
整个区域应该被绿色覆盖。
null
.container {
width: 400px;
height: 500px;
border: solid 2px;
position: relative;
overflow: auto;
}
.row {
width: 500px;
height: 60px;
border: solid 4px blue;
margin: 10px;
}
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: green;
opacity: 0.5;
}<div class="container">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="cover"></div>
</div>null
下面是一段Javascript代码。
快速提醒:document.QuerySelector（“。Cover”）这里只返回第一个元素，如果有更多元素，请使用document.QuerySelectorAll()
null
const { scrollWidth, scrollHeight } = document.querySelector(".container");
const coverElement = document.querySelector(".cover");
coverElement.style.width = `${scrollWidth}px`;
coverElement.style.height = `${scrollHeight}px`;.container {
width: 400px;
max-height: 500px;
border: solid 2px;
position: relative;
overflow: auto;
}
.row {
width: 500px;
height: 60px;
border: solid 4px blue;
margin: 10px;
}
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: green;
opacity: 0.5;
}<div class="container">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="cover"></div>
</div>
我不知道你的最终目标是什么，但是你试过简单地将背景应用到容器上吗？
null
.container {
width: 400px;
height: 500px;
border: solid 2px;
overflow: auto;
background-color: rgba(0,255,0,.5);
}
.scroll-container {
position: relative;
}
.row {
width: 500px;
height: 60px;
border: solid 4px blue;
margin: 10px;
}<div class="container">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>