水平滚动div无法通过鼠标滚轮滚动的JavaScript解决方案求助

直接使用以下JavaScript代码，可实现鼠标滚轮控制水平滚动，同时保留Mac触控板的原生滚动体验：

const container = document.getElementById("horizontalstorecontainer");

container.addEventListener("wheel", function(e) {
  // 仅处理鼠标滚轮事件（触控板滚动会同时产生deltaX/deltaY，或delta值较小）
  if (e.deltaX === 0 && Math.abs(e.deltaY) > 10) {
    // 按鼠标滚轮的方向和幅度调整水平滚动位置，更贴合用户操作习惯
    container.scrollLeft += e.deltaY;
    // 阻止默认垂直滚动行为（页面无需垂直滚动）
    e.preventDefault();
  }
});

关键细节说明： #

• 区分鼠标与触控板：通过判断deltaX === 0（鼠标滚轮通常只有垂直方向的delta）和deltaY的绝对值阈值，过滤掉触控板的滚动事件，确保原生触控体验不受影响。
• 自然滚动速度：直接使用e.deltaY作为滚动增量，替代固定步长100，滚动速度更符合用户的滚轮操作习惯。
• 避免垂直滚动干扰：仅在处理鼠标滚轮时调用e.preventDefault()，既阻止页面不必要的垂直滚动，又不破坏触控板的原生行为。

原代码失效原因分析： #

1. 固定步长100可能导致滚动体验生硬，甚至在某些环境下触发异常；
2. 未区分鼠标和触控板事件，直接调用e.preventDefault()可能干扰了触控板的原生滚动逻辑；
3. 未根据deltaY的实际数值动态调整滚动量，适配性较差。

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