触控板横向滚动不符合预期问题及适配方案咨询

核心思路 #

通过区分鼠标滚轮操作和触控板横向滑动操作，结合移动端媒体查询，实现以下效果：

• 鼠标滚轮上下滚动 → 触发横向滚动
• 触控板左右滑动 → 保留原生横向滚动行为
• 移动端屏幕 → 完全禁用自定义横向滚动逻辑，恢复正常滚动
• 仅在指定2个页面生效

步骤1：标记目标页面的滚动容器 #

给需要启用该逻辑的2个页面的<main>元素添加专属类，确保代码只作用于这两个页面：

<!-- 目标页面的main元素 -->
<main class="horizontal-scroll-enabled">
  <!-- 页面内容 -->
</main>

步骤2：优化后的JavaScript代码 #

// 仅获取目标页面的滚动容器
const scrollContainer = document.querySelector("main.horizontal-scroll-enabled");
if (!scrollContainer) return;

// 检测是否为移动端（可根据你的响应式断点调整宽度阈值）
const isMobileViewport = window.matchMedia("(max-width: 767px)").matches;
if (isMobileViewport) return;

scrollContainer.addEventListener("wheel", (evt) => {
  // 判断是否是触控板的横向滑动操作：deltaX绝对值大于deltaY，说明用户是在横向滑动
  if (Math.abs(evt.deltaX) > Math.abs(evt.deltaY)) {
    // 保留原生横向滚动行为，不阻止默认事件
    return;
  }

  // 鼠标滚轮上下滚动时，执行自定义横向滚动逻辑
  evt.preventDefault();
  // 可选：添加平滑滚动效果
  scrollContainer.scrollTo({
    left: scrollContainer.scrollLeft + evt.deltaY,
    behavior: "smooth"
  });
});

代码说明 #

1. 页面范围控制：通过main.horizontal-scroll-enabled选择器，只对标记了该类的页面生效，其他页面不受影响。
2. 移动端适配：使用window.matchMedia检测屏幕宽度，移动端直接跳过事件绑定，解决原代码导致的鼠标滚轮无法正常滚动的问题。
3. 设备操作区分：
   • 触控板横向滑动时，deltaX的绝对值会远大于deltaY，此时直接返回，保留原生横向滚动，符合用户操作习惯。
   • 鼠标滚轮上下滚动时，deltaX接近0，此时阻止默认行为，将纵向滚动转为横向滚动。
4. 可选优化：添加scrollTo的behavior: "smooth"实现平滑滚动，不需要的话可改用原代码的scrollContainer.scrollLeft += evt.deltaY。

调整建议 #

• 移动端阈值可根据项目响应式断点修改，比如把(max-width: 767px)换成你的移动端分界宽度。
• 若遇到触控板误判，可给deltaX增加绝对值阈值，比如：

  if (Math.abs(evt.deltaX) > 15 && Math.abs(evt.deltaX) > Math.abs(evt.deltaY)) {
    return;
  }
  

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