Chrome中带overflow:scroll的旋转div滚动功能失效问题求助

问题描述 #

实现了一个矩形div，鼠标悬停时通过3D旋转显示内容，内容垂直溢出时需要支持滚动。该功能在Firefox中正常工作，但在Chrome里滚动条虽然显示，却无法正常滚动，仿佛内容并未溢出。

代码复现 #

HTML #

<div id="card-wrapper">
  <div id="card-rotater">
    <div id="card">
      <div id="content">
        line1<br>
        line2<br>
        line3<br>
        line4<br>
        line5<br>
        line6<br>
        line7<br>
        line8<br>
        line10
      </div>
    </div>
  </div>
</div>

CSS #

#card-wrapper {
  background-color: red;
  height: 100px;
  max-height: 100px;
  max-width: 200px;
  min-height: 100px;
  min-width: 200px;
  overflow: scroll;
  perspective: 500px;
  width: 200px;
}

#card-rotater {
  height: 100%;
  transform: rotateX(0deg);
  transform-style: preserve-3d;
}

#card {
  transform: rotateX(-90deg) scale(0.9) translateZ(50px);
  height: 100%;
}

#content {
  background-color: green;
}

JavaScript #

const wrapper = document.getElementById('card-wrapper');
const rotater = document.getElementById('card-rotater');

wrapper.addEventListener('mouseenter', () => {
  rotater.setAttribute('style', 'transform: rotateX(90deg);');
});

wrapper.addEventListener('mouseleave', () => {
  rotater.setAttribute('style', 'transform: rotateX(0deg);');
});

问题原因 #

Chrome浏览器在处理带有3D变换的元素时，滚动容器（#card-wrapper）的溢出计算是基于元素的原始布局尺寸，而非变换后的视觉尺寸。#card元素通过rotateX(-90deg)和translateZ变换后，视觉上的高度并未被滚动容器正确识别，导致滚动区域与实际内容不匹配。

解决方案 #

调整滚动容器的层级，将滚动行为移到变换后的内部元素上，同时确保内部元素的尺寸正确匹配。修改后的CSS如下：

#card-wrapper {
  background-color: red;
  height: 100px;
  max-height: 100px;
  max-width: 200px;
  min-height: 100px;
  min-width: 200px;
  /* 移除容器的overflow，把滚动交给内部元素 */
  perspective: 500px;
  width: 200px;
}

#card-rotater {
  height: 100%;
  transform: rotateX(0deg);
  transform-style: preserve-3d;
}

#card {
  transform: rotateX(-90deg) scale(0.9) translateZ(50px);
  /* 给card设置固定尺寸，确保变换后内容的滚动容器正确 */
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}

#content {
  background-color: green;
  /* 确保内容高度超过card的高度，触发滚动 */
  min-height: 150px;
}

说明 #

1. 将overflow: scroll从外层的#card-wrapper移到内层的#card元素上，让滚动容器直接对应变换后的内容区域。
2. 给#card设置width: 100%，确保其尺寸与外层容器匹配。
3. 给#content设置min-height（或直接设置足够的高度），确保内容溢出触发滚动。

这样修改后，Chrome和Firefox中都能正常显示滚动条并支持滚动，同时保留鼠标悬停的3D旋转效果。

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