Firefox浏览器横向滚动异常问题求助及代码示例

这个旋转容器模拟横向滚动的思路确实在Firefox里踩了兼容性坑——毕竟不同浏览器对旋转元素的滚动事件处理逻辑差异不小。我给你换个更可靠的方案，用**原生横向滚动+滚动捕捉（scroll-snap）**实现，完全不需要依赖旋转，在Firefox、Chrome等主流浏览器里都能正常工作，还能解决你遇到的所有问题：

改进后的代码实现 #

HTML结构（简化版） #

<div id="container">
  <div class="box one">
    <div>1</div>
  </div>
  <div class="box two">
    <div>2</div>
  </div>
  <div class="box three">
    <div>3</div>
  </div>
  <div class="box four">
    <div>Last</div>
  </div>
</div>

CSS样式（核心是原生横向滚动+滚动捕捉） #

body { 
  margin: 0; 
  font-family: Georgia; 
  overflow: hidden; /* 隐藏body自身的滚动条 */
}

#container {
  overflow-x: auto; /* 开启横向滚动 */
  overflow-y: hidden;
  white-space: nowrap; /* 让区块横向排列 */
  height: 100vh;
  width: 100vw;
  scroll-snap-type: x mandatory; /* 强制横向滚动时对齐到区块 */
  scroll-behavior: smooth; /* 开启平滑滚动（可选） */
}

.box {
  width: 100vw;
  height: 100vh;
  display: inline-block;
  position: relative;
  scroll-snap-align: start; /* 每个区块对齐滚动容器的起始位置 */
}

/* 区块内的数字样式（保留原效果） */
.box > div {
  width: 100px;
  height: 100px;
  font-size: 96px;
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  line-height: .7;
  font-weight: bold;
}

/* 区块背景色（保留原效果） */
.one { background-color: #45CCFF; }
.two { background-color: #49E83E; }
.three { background-color: #EDDE05; }
.four { background-color: #E84B30; }

/* 隐藏横向滚动条（可选，不影响功能） */
#container::-webkit-scrollbar {
  height: 0;
}
#container::-moz-scrollbar {
  height: 0;
}

JavaScript处理鼠标滚轮（让纵向滚轮触发横向滚动） #

const container = document.getElementById('container');
container.addEventListener('wheel', (e) => {
  e.preventDefault();
  // 根据滚轮方向，滚动到对应区块
  container.scrollBy({
    left: e.deltaY > 0 ? window.innerWidth : -window.innerWidth,
    behavior: 'smooth'
  });
});

为什么这个方案能解决你的问题？ #

• 原生横向滚动无兼容问题：不再依赖旋转容器的 hack 方式，Firefox对原生横向滚动的支持非常完善，触摸板/鼠标横向滑动能正常响应
• scroll-snap实现精准滚动对齐：scroll-snap-type和scroll-snap-align属性让点击滚动区域或滑动时，自动对齐到下一个完整区块，和Chrome里的效果一致
• 滚轮事件映射更合理：通过JavaScript监听滚轮事件，把纵向滚轮的滚动转换成横向滚动，Mac妙控鼠标的横向滑动也能直接触发对应操作，不会出现间歇性失效的问题

原方案的问题根源 #

你之前用旋转容器模拟横向滚动的思路，本质是把纵向滚动“伪装”成横向，但Firefox对旋转元素的滚动事件处理逻辑和Chrome不同：

• 滚轮事件的delta值不会自动映射到旋转后的方向
• 触摸滑动的识别逻辑对旋转元素有偏差
• 滚动对齐的行为在旋转容器中无法被浏览器正确识别

改用原生方案后，这些问题就都不存在了，代码也更易维护。

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