如何避免Overflow干扰TranslateZ()实现滚动视差效果？

我用Vanilla Tilt.js实现Div悬停时的视差滚动区域：未设置overflow时视差效果正常，但添加overflow:auto让Div可滚动后，视差效果失效，所有元素与Div处于同一平面。试过所有Overflow类型，都会覆盖Z轴定位；尝试用iframe还会同时禁用悬停和视差效果。

原代码 #

HTML #

<body>
    <div class="tiltboxthing" style="height: 200px;width: 200px;margin: 20px;padding: 20px;">
    <p>hi hello</p><img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px"><p>
        hi hello
    </p>
    <img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px">
    <p>
        hi hello
    </p>
    <img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px">
    <p>
        hi hello
    </p>
    <img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px">
    <p>
        hi hello
    </p>
    <img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px">
    <p>
        hi hello
    </p>
    <img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px">
</div>
</body>

CSS #

.tiltboxthing {  
    background-color: green;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.tiltboxthing p, img, h1, h2, h3, h4, h5, iframe{
    transform: translateZ(30px)
}

JS #

VanillaTilt.init(document.querySelectorAll(".tiltboxthing"),{
    tilt: true,
    "scale": 1.1,
    glare: true,
    "max-glare": 0.5,
    reverse: true
});

解决方法 #

核心原因 #

浏览器对设置了overflow的元素会创建新的堆叠上下文，同时强制扁平化3D变换（忽略transform-style: preserve-3d），导致translateZ失效。

方案：嵌套容器分离3D变换与滚动 #

把3D变换容器和滚动容器拆分开，外层负责Vanilla Tilt的3D效果，内层负责滚动，这样overflow不会干扰外层的3D空间：

修改后的代码

HTML

<body>
  <!-- 外层：负责3D变换和Vanilla Tilt -->
  <div class="tilt-container" style="height:200px;width:200px;margin:20px;">
    <!-- 内层：负责滚动，承载内容 -->
    <div class="scroll-content" style="height:100%;width:100%;padding:20px;overflow:auto;">
      <p>hi hello</p>
      <img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px">
      <p>hi hello</p>
      <img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px">
      <p>hi hello</p>
      <img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px">
      <p>hi hello</p>
      <img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px">
      <p>hi hello</p>
      <img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px">
      <p>hi hello</p>
      <img src="https://fritzfromtechsupport.com/Images/Me.png" height="100px">
    </div>
  </div>
</body>

CSS

.tilt-container {
  background-color: green;
  transform-style: preserve-3d;
  perspective: 1000px;
}
/* 内容元素保留translateZ */
.scroll-content p, .scroll-content img {
  transform: translateZ(30px);
}
/* 确保内层容器继承外层的3D空间 */
.scroll-content {
  transform-style: preserve-3d;
}

JS

// 作用在外层的tilt-container上
VanillaTilt.init(document.querySelectorAll(".tilt-container"),{
    tilt: true,
    "scale": 1.1,
    glare: true,
    "max-glare": 0.5,
    reverse: true
});

这个方案能同时保留滚动功能和3D视差效果，完全避开overflow对3D变换的干扰。

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