如何在iOS上禁用Blazor PWA的返回滑动手势？

你遇到的问题是iOS全局左滑返回手势优先级高于Blazor组件的触摸事件，所以局部div的@ontouchmove:preventDefault="true"无法生效。以下是几个可行的解决方案：

方案1：全局拦截左侧触摸起始事件 #

在wwwroot/index.html的</body>标签前添加以下JavaScript代码，精准拦截屏幕左侧的滑动触发：

document.addEventListener('touchstart', function(e) {
  // 只拦截从屏幕左边缘50px内发起的触摸
  if (e.touches[0].clientX < 50) {
    e.preventDefault();
  }
}, { passive: false });

注意：必须设置{ passive: false }，因为iOS默认touch事件是passive模式，preventDefault()不会生效。这个方法只会阻止系统的左滑返回，不影响应用内其他区域的滑动交互。

方案2：使用CSS禁用水平滚动行为 #

在wwwroot/css/app.css中添加全局CSS规则，阻止水平方向的滚动触发浏览器导航：

html, body {
  overscroll-behavior-x: none;
}

这个属性会禁止浏览器对水平滚动的默认处理，包括iOS的左滑返回手势，同时保留垂直滚动的正常功能。

为什么你之前的方法无效 #

@ontouchmove:preventDefault="true"仅作用于单个div元素，而iOS的左滑返回手势是在document或window层面触发的，局部元素的事件拦截无法覆盖系统级的手势处理。

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