下方具有固定内容的可滚动叠加层

Question

在此示例中，我需要使覆盖图能够一直滚动到屏幕之外。内容需要固定在固定位置，如下面的示例所示。如何允许叠加层div一直滚动到视口之外？

示例站点： 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%;
    }