应用CSS视差效果的容器元素为何未隐藏滚动条？

问题描述 #

参考教程实现视差效果时，其他功能正常，但视差元素（.B1）内部出现了垂直滚动条，已设置body { margin: 0; }，相关帖子未找到解决方案。

Parallax CSS #

body {
    margin: 0;
    overflow-x: hidden;
    font-family: 'body-reg';
}

.row {
    width: 100%;
}

* {
    box-sizing: border-box;
}

.B1 {
    height: calc(100vh - 20px);
    min-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-perspective: 10px;
    perspective: 10px;
}

.B1 .container--parallax {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transform-style: preserve-3d;
    z-index: -1;
}

.B1 .container--parallax .background {
    transform: translateZ(-10px) scale(2);
}

.B1 .container--parallax .foreground {
    transform: translateZ(-5px) scale(1.5);
}

.B1 .container--parallax .background,
.B1 .container--parallax .foreground {
    display: block;
    position: absolute;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: -1;
}

HTML #

<body>
    <main>
        <section class="row B1">

            <div class="container--parallax">
                <img src="/assets/images/background.png" alt="Background" class="background"> 
                <img src="/assets/images/foreground.png" alt="Foreground" class="foreground">
            </div>

            <section class="row B2">

                <!-- add content -->

            </section>
        </section>

        <section class="row B3">

            <!-- more content -->

        </section>
    </main>
</body>

原因分析 #

1. 内容高度超出容器限制：.B1内部包含.container--parallax和.B2两个元素，其中.container--parallax的高度设为100%（继承.B1的高度calc(100vh - 20px)），而.B2作为正常文档流元素，会额外占据垂直空间，导致.B1内部总高度超过了设定的容器高度。加上你给.B1设置了overflow-y: auto，当内容高度超出容器时，浏览器就会显示垂直滚动条。
2. 视差图片缩放的潜在影响：虽然图片设置了object-fit: cover和绝对定位，但如果图片原始比例与.B1容器比例差异较大，scale()缩放后可能会在垂直方向产生轻微溢出，不过这不是主要原因，核心还是.B2的文档流占位问题。

解决办法 #

方案1：调整HTML结构（推荐） #

将.B2移出.B1的范围，让视差区域（.B1）仅承载视差背景，内容区块作为独立部分存在：

<body>
    <main>
        <section class="row B1">
            <div class="container--parallax">
                <img src="/assets/images/background.png" alt="Background" class="background"> 
                <img src="/assets/images/foreground.png" alt="Foreground" class="foreground">
            </div>
        </section>

        <section class="row B2">
            <!-- add content -->
        </section>

        <section class="row B3">
            <!-- more content -->
        </section>
    </main>
</body>

方案2：通过CSS让.B2脱离文档流 #

如果必须保留当前HTML结构，给.B2设置绝对定位，使其不占据.B1的内部空间：

.B1 {
    /* 在原有样式基础上添加 */
    position: relative;
}

.B2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 可根据需求调整top值，避免内容被遮挡 */
}

方案3：直接禁用内部滚动（不推荐） #

若不需要.B1内部滚动，可将overflow-y: auto改为overflow-y: hidden，但这会截断超出容器的内容，仅适合临时测试：

.B1 {
    overflow-y: hidden;
    /* 保留其他样式 */
}

内容的提问来源于stack exchange，提问作者MailCarrier