Firefox浏览器鼠标水平滚动失效问题求助

你的代码在Firefox中失效主要有两个核心原因：

• 错误地将modifier设为字符串'1'，导致乘法运算出现隐式转换异常
• Firefox对wheel事件的默认行为阻止逻辑需要更严谨的配置

修改后的完整代码如下：

HTML+JS #

<section class="card" id="horizontal-scroller">
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
</section>
<script>
document.getElementById("horizontal-scroller")
.addEventListener('wheel', function(event) {
  let modifier;
  if (event.deltaMode == event.DOM_DELTA_PIXEL) {
    modifier = 1; // 改为数字类型，避免隐式转换问题
  } else if (event.deltaMode == event.DOM_DELTA_LINE) {
    modifier = parseInt(getComputedStyle(this).lineHeight);
  } else if (event.deltaMode == event.DOM_DELTA_PAGE) {
    modifier = this.clientHeight;
  }
  if (event.deltaY !== 0) {
    this.scrollLeft += modifier * event.deltaY;
    event.preventDefault();
    event.stopPropagation(); // 阻止事件冒泡，避免触发父元素默认行为
  }
}, { passive: false }); // 显式关闭passive模式，确保preventDefault生效
</script>

style.css #

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #8e44ad;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
    background-color: #fff;
    min-width: 100%;
    min-height: 200px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none; /* 隐藏Firefox滚动条，和Chrome保持一致视觉效果 */
  }
  .card--content {
    background-color: #e74c3c;
    min-width: 200px;
    margin: 5px;
  }
  .card::-webkit-scrollbar {
    display: none;
  }

关键修改说明： #

1. 修正modifier类型：将字符串'1'改为数字1，消除字符串与数字相乘时的隐式转换错误，这是Firefox中运算失效的核心原因。
2. 配置passive: false：显式设置事件监听的passive模式为false，确保event.preventDefault()能够正常阻止Firefox的默认垂直滚动行为。
3. 添加stopPropagation()：防止事件冒泡到父元素，避免触发不必要的默认滚动行为。
4. 统一滚动条隐藏：新增scrollbar-width: none;，让Firefox的滚动条也能隐藏，保持跨浏览器视觉一致性。

修改后，Firefox和Chrome均可通过鼠标滚轮正常实现水平滚动。

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