滚动页面时视差Div出现多余内容，寻求修复方案

问题分析 #

你遇到的问题根源在于：视差图片通过transform: scale()放大后尺寸远超容器范围，而之前添加的overflow-y:hidden未作用在正确的父容器上。绝对定位元素若父容器未设置overflow: hidden和正确的定位属性，超出部分会在滚动时暴露出来。

解决方案 #

修改CSS代码，给包含视差图片的.container添加关键约束，并调整图片的变换原点：

/* 重置全局默认样式，避免边距引发的滚动问题 */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#wrapper {
  width: 100%;
}

/* 核心：给视差容器设置裁剪与定位规则 */
.container {
  position: relative;
  height: 100vh;
  overflow: hidden; /* 强制裁剪容器内超出的内容 */
}

#background{
    max-height: 100vh;
    width: 100%;
    object-fit: cover;
    position: absolute;
    transform: translateZ(-40px) scale(5);
    transform-origin: center center; /* 从中心放大，保证背景显示区域正常 */
}

#foreground{
    height: 100%;
    width: 70%;
    position: absolute;
    object-fit: cover ;
    bottom: 0;
    left: 60%;
    z-index: 2;
    transform: translateZ(-20px) scale(3);
    transform-origin: bottom right; /* 匹配前景图片的定位，避免放大后偏移 */
}

关键修复说明 #

• .container设置overflow: hidden：直接裁剪内部放大后超出的图片内容，这是解决多余内容显示的核心。
• .container设置position: relative：让内部绝对定位的图片以该容器为参考基准，确保定位范围符合预期。
• 添加transform-origin：控制图片放大的基准点，避免放大后图片偏移导致非预期内容露出，可根据图片实际位置调整（比如背景用中心，前景用右下角）。
• 全局重置边距：消除html/body默认边距引发的横向滚动或多余空白。

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