如何使用CSS或JavaScript禁用双击滚动功能？

这是iPhone Safari的默认触摸行为，touch-action: manipulation仅会禁用双击缩放，无法拦截这种分段滚动触发逻辑。可以通过以下两种方案解决：

方案1：监听触摸事件拦截双击行为 #

通过监听touchend事件，判断双击时间差与点击位置，针对性阻止默认行为：

let lastTapTimestamp = 0;

document.addEventListener('touchend', (e) => {
  const now = Date.now();
  const tapInterval = now - lastTapTimestamp;
  
  // 判定为双击（300ms内连续点击）且点击区域在屏幕下半部分
  if (tapInterval > 0 && tapInterval < 300) {
    const touchPoint = e.changedTouches[0];
    if (touchPoint.clientY > window.innerHeight / 2) {
      e.preventDefault();
    }
  }
  
  lastTapTimestamp = now;
}, { passive: false });

• 必须设置{ passive: false }，否则iOS Safari不允许在触摸事件中调用preventDefault()
• 可根据需求调整双击时间阈值（300ms）或点击区域的判定比例

方案2：针对特定区域禁用所有触摸默认行为 #

如果仅需要在特定元素区域禁用该行为，可给目标元素添加CSS：

.target-element {
  touch-action: none;
}

⚠️ 该属性会禁用目标元素上所有默认触摸行为（包括滚动、缩放等），仅适合无需触摸交互的静态区域。

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