如何让ScrollControls支持触控设备的滚动功能？

针对你遇到的ScrollControls触控失效问题，给你几个实操的解决步骤：

• 修正ScrollControls的触控配置
  确保初始化ScrollControls时明确启用触控支持，同时设置精准的触控行为，避免浏览器默认事件干扰：

  const controls = new ScrollControls(camera, document.getElementById('root'));
  // 启用触控控制
  controls.touchControls.enabled = true;
  // 指定仅允许垂直滚动的触控行为，避免浏览器拦截事件
  controls.touchControls.touchAction = "pan-y";
  

• 调整CSS样式
  之前的touch-action: touch范围太宽泛，改成精准的垂直滚动配置，同时调整canvas的触控行为：

  #root {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 明确允许垂直滚动，覆盖浏览器默认行为 */
    touch-action: pan-y !important;
  }
  
  canvas {
    /* 让canvas不处理原生触控事件，完全交给ScrollControls */
    touch-action: none;
  }
  

• 移除手动添加的touch事件监听器
  ScrollControls内部已经封装了完整的触控事件处理逻辑，你手动添加的touchmove/touchstart监听器会和内置逻辑冲突，直接删掉这些自定义监听代码即可。

• 检查canvas的pointer-events设置
  确保你的canvas没有设置pointer-events: none，这个属性会完全阻止触控事件传递到ScrollControls，导致无法触发滚动。

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