javascript - 可滚动覆盖，下方有固定内容

Question

我需要让这个例子中的叠加层能够一直滚动到屏幕之外。内容需要位于固定位置，如下例所示。我怎样才能让覆盖 div 一直滚动到视口(viewport)之外？

示例站点: https://www.ssk.com/

HTML

<div class="test-overlay"></div>
    <div class="test-content-container"></div>

CSS

.test-overlay {
    background: orange;
    position: relative;
    width: 100%;
    height: 100vh;
    text-align: center;
    z-index: 995;
}

.test-content-container {
    background: rgba(156,64,81,1.00);
    position: fixed;
    top: 0px;
    left: 0px;
    font-size: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
}

Answer 1

我通过在包含这两个元素的容器 div 底部添加 100% 填充来解决这个问题。

HTML

<div class="test-complete-container">
<div class="test-overlay"></div>
    <div class="test-content-container"></div>
</div>

CSS

.test-overlay {
    background: orange;
    position: relative;
    width: 100%;
    height: 100vh;
    text-align: center;
    z-index: 995;
}

.test-content-container {
    background: rgba(156,64,81,1.00);
    position: fixed;
    top: 0px;
    left: 0px;
    font-size: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
}
    .test-complete-container {
        height: 100%;
        width: 100%;
        padding-bottom: 100%;
    }