如何修复不同Z深度重叠视差元素的滚动行为异常问题

问题说明 #

实现带视差效果的头部区块时，需求与现有问题如下：

• 头部包含文本、视频前景内容，上方叠加多图层背景图形
• 预期交互：滚动经过头部时，前景内容按正常页面速度滚动，背景图层向上滚动速度快于前景，形成深度差
• 现有实现参考纯CSS透视视差方案编写，已经实现图层速度差效果，但transform属性导致页面出现额外滚动高度，必须滚动完所有溢出内容才能离开头部区域，滚动逻辑异常。

原有实现代码如下：

.header {
  min-height: 400px;
  display: block;
  background: blue;
  perspective: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

.header .icons {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 15;
  filter: blur(7px);
  opacity: .6;
  background: url("https://picsum.photos/200") 85% 80% no-repeat;
  background-size: 150px;
  transform: translateZ(200px);
}

.body {
  display: block;
  min-height: 750px;
  background: red;
}

<div class="header">
  <div class="content">
    <h1>Header Here</h1>
  </div>
  <div class="icons">

  </div>
</div>
<div class="body">

</div>

故障原因 #

3D透视模式下，使用translateZ将元素向视口方向移动时，元素的视觉尺寸会按透视比例放大，超出父容器的部分会被浏览器计入页面总滚动高度；同时原代码给.header设置了overflow-y: auto，让头部生成了独立滚动上下文，进一步放大了滚动异常问题。

修复方案 #

核心是通过缩放抵消translateZ带来的元素尺寸放大，同时调整容器属性，将视差效果严格限制在头部自身高度范围内：

• 移除.header的overflow-y: auto属性，新增position: relative作为绝对定位视差图层的定位锚点，避免头部生成独立滚动容器
• 给前景内容.content设置更高的z-index，确保内容始终显示在视差图层上方
• 按透视比例计算缩放值，给视差图层添加scale校正：缩放系数 = 透视距离 / (透视距离 - Z轴偏移值)，本示例中透视距离为400px，Z轴偏移200px，对应缩放值为0.5，可完全抵消Z轴位移带来的尺寸放大
• 调整视差图层高度为头部高度的2倍，设置transform-origin: center top，保证视差滚动过程中图层不会露出空白

修复后完整代码 #

.header {
  min-height: 400px;
  position: relative;
  background: blue;
  perspective: 400px;
  overflow-x: hidden;
}

.header .content {
  position: relative;
  z-index: 20;
}

.header .icons {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 200%;
  z-index: 15;
  filter: blur(7px);
  opacity: .6;
  background: url("https://picsum.photos/200") 85% 40% no-repeat;
  background-size: 150px;
  transform: translateZ(200px) scale(0.5);
  transform-origin: center top;
}

.body {
  min-height: 750px;
  background: red;
}

<div class="header">
  <div class="content">
    <h1>Header Here</h1>
  </div>
  <div class="icons"></div>
</div>
<div class="body"></div>

修复后无额外滚动高度，滚动经过头部时背景图层速度为前景的2倍，滚动到头部底部后可直接进入下方内容区，视差效果仅在头部高度范围内生效。

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