Firefox中CSS翻转卡片滚动问题：滚动条可见但鼠标滚轮无效

问题现象 #

基于CSS 3D翻转卡片实现，给正反两面都设置overflow: auto后，仅Firefox出现异常：

• 背面卡片可正常通过鼠标滚轮滚动
• 正面卡片只能通过拖动滚动条滚动，鼠标滚轮无响应
• 仅当将背面卡片设置为display: none时，正面滚轮才恢复正常

原因 #

Firefox对backface-visibility: hidden的事件处理逻辑与其他浏览器存在差异：

• 虽然backface-visibility: hidden会让背面元素在视觉上不可见，但它仍然处于事件捕获层（因为绝对定位的正反两面是完全重叠的）
• 当鼠标滚轮作用在卡片区域时，事件被背面元素优先捕获，但由于背面此时是翻转状态，滚轮操作无法触发其滚动（因为它不在视口可见方向），同时也没有将事件传递给正面元素，导致正面滚轮失效

解决方案 #

通过在卡片翻转时，给非当前显示的面添加pointer-events: none，让它不再捕获任何鼠标事件，从而让事件落到当前可见的面上：

修改后的代码 #

JavaScript

function rotate() {
  const inner = document.getElementsByClassName("flip-card-inner")[0];
  inner.style.transform = "rotateY(180deg)";
  // 正面禁用事件，背面启用
  document.querySelector(".flip-card-front").style.pointerEvents = "none";
  document.querySelector(".flip-card-back").style.pointerEvents = "auto";
}

function rotateBack() {
  const inner = document.getElementsByClassName("flip-card-inner")[0];
  inner.style.transform = "rotateY(0)";
  // 背面禁用事件，正面启用
  document.querySelector(".flip-card-back").style.pointerEvents = "none";
  document.querySelector(".flip-card-front").style.pointerEvents = "auto";
}

CSS（可选优化，设置初始事件状态）

.flip-card-front {
  background-color: #bbb;
  color: black;
  pointer-events: auto; /* 默认正面可捕获事件 */
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
  pointer-events: none; /* 默认背面禁用事件 */
}

补充说明 #

• pointer-events: none会让元素完全忽略鼠标相关事件（包括滚轮、点击等），精准解决了背面元素拦截事件的问题
• 该方案不会影响卡片的翻转动画效果，同时兼容所有现代浏览器

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