Chrome/Edge中使用触控笔时滚动条方向反转且无法拖拽问题求助

问题现象 #

• 鼠标操作CSS overflow 属性生成的滚动条完全正常，但使用触控笔时，滚动方向反转，且滚动条手柄完全无法拖拽。
• 该问题不仅出现在网页自定义滚动条中，Chrome、Edge浏览器的开发者工具（控制台、源码面板等）自带的滚动条也存在同样问题。
• 触发环境：Windows10设备搭载Wacom数位屏或N-Trig触控笔，使用最新版Chrome/Edge浏览器及最新Wacom驱动时必现。

原因推测 #

触控笔在滚动条轨道上操作时，浏览器误将其识别为文档拖拽操作而非滚动条操作；在手柄上操作时，文档拖拽的动作会抵消手柄的正常移动，导致手柄无法拖动。

可行的修复方案 #

1. 浏览器内置设置调整 #

• 打开Chrome/Edge浏览器，在地址栏输入 chrome://flags（Edge对应 edge://flags），搜索 Pointer Events: Scroll Behavior 选项，将其设置为 Normal 或 Disabled，重启浏览器后测试效果。
• 可尝试关闭 Touch Events API 选项，但该操作可能影响其他触控功能，需谨慎测试。

2. 系统与驱动设置调整 #

• 打开Windows设置 → 设备 → 触控笔和Windows Ink，找到“当我使用触控笔时”的相关选项，关闭“允许用触控笔拖拽内容”或调整滚动行为的设置。
• 打开Wacom数位板属性，进入“笔”选项卡，检查“拖拽”功能是否被误绑定，尝试将驱动设置重置为默认值。

3. 网页端临时兼容代码（仅针对自定义网页） #

如果是你自己开发的网页，可以通过JavaScript监听触控笔事件，阻止默认的文档拖拽行为，让浏览器正确识别滚动条操作：

const scrollContainer = document.querySelector('.a');
scrollContainer.addEventListener('pointerdown', (e) => {
  // 检测当前输入设备是否为触控笔
  if (e.pointerType === 'pen') {
    const containerRect = scrollContainer.getBoundingClientRect();
    // 判断点击区域是否为滚动条（假设滚动条宽度为15px，可根据实际调整）
    const isVerticalScrollbar = e.clientX > containerRect.right - 15;
    const isHorizontalScrollbar = e.clientY > containerRect.bottom - 15;
    
    if (isVerticalScrollbar || isHorizontalScrollbar) {
      e.preventDefault();
    }
  }
});

注意：此方法需要根据实际滚动条宽度调整判断阈值，可能存在兼容性问题，仅作为临时替代方案。

根本解决途径 #

该问题属于浏览器对触控笔Pointer Events的处理bug，建议直接向Chrome/Edge官方反馈问题：
打开浏览器的「帮助」→「报告问题」，详细描述你的设备环境（Windows10版本、触控笔型号、浏览器版本、Wacom驱动版本）和复现步骤，并附上下方的最小复现代码。

最小复现示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .a {
      display: block;
      width: 200px;
      height: 200px;
      overflow: scroll;
    }
    .b {
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
  <div class="a">
    <div class="b">
      <p>abc</p>
    </div>
  </div>
</body>
</html>

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