ReactJS中实现鼠标滚轮水平滚动、禁用垂直滚动问题求助

核心实现步骤 #

• 第一步：通过CSS禁用原生垂直滚动，配置横向滚动容器基础样式

/* 根节点基础配置 */
html, body, 应用根节点 {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow-y: hidden;
  overflow-x: auto;
}

/* 横向内容容器 */
.horizontal-wrapper {
  height: 100%;
  width: max-content;
  display: flex;
  /* 内部横向排列的子元素按需求设置固定宽度即可 */
}

• 第二步：绑定滚轮事件实现滚动方向转换，注意兼容现代浏览器的事件规则

const scrollWrapper = document.querySelector('.horizontal-wrapper')

scrollWrapper.addEventListener('wheel', function(e) {
  e.preventDefault()
  // 统一兼容不同浏览器的滚轮增量取值
  const delta = Math.max(-1, Math.min(1, (e.deltaY || -e.wheelDelta || e.detail)))
  // 调整数值可以修改滚动速度，这里设为单次滚动40px
  scrollWrapper.scrollLeft -= delta * 40
}, { passive: false })

常见方案失效排查点 #

• 90%的方案不生效是因为绑定wheel事件时没传入第三个参数{ passive: false }：现代浏览器为了优化滚动性能，默认将wheel、touchstart这类滚动相关事件设为被动模式，被动模式下调用e.preventDefault()会被浏览器直接忽略，无法阻止默认垂直滚动行为
• 不要把滚动事件绑定到window或document对象上，直接绑定到实际承载横向滚动的容器节点上，避免和页面其他交互组件的事件冲突
• 不要直接给根节点设置overflow: hidden全量禁用滚动，仅需禁用Y轴溢出，保留X轴滚动能力即可
• 如果页面存在嵌套的局部滚动区域，需要在对应区域拦截事件冒泡，避免滚动行为互相干扰

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