fix(h5): prevent native scrolling from stealing diagonal image swipes

2026-10-13 00:42:01 +08:00
parent 4c478b16e3
commit 98935dd168
10 changed files with 197 additions and 171 deletions
@@ -4,10 +4,13 @@

 - 图片区域可横向跟手切换；说明文字不触发横滑，页签仍可点击或键盘切换。
 - 当前试用横向优先：移动超过 12px 且横向位移大于纵向的 2/3 即进入横滑；只有纵向位移达到横向的 1.5 倍时才锁定竖滑。一次手势锁定后不重新判方向。之前上线的竖向优先版本要求横向大于纵向的 1.5 倍才横滑。
+- 修正浏览器抢占：仅改方向比例时，`touch-action: pan-y` 仍可能让浏览器提前滚动并发送 `pointercancel`。现在仅报告详情卡启用非被动 `touchmove`，与 Pointer Events 共用同一方向锁；图片区域单指横滑时取消原生滚动，竖滑和文字区域不拦截。不通过 `pointermove.preventDefault()` 或指针捕获来假定原生滚动已被阻止。
 - 横滑过程中冻结卡片当前高度，包括图片/字体延迟加载导致的尺寸更新；松手或取消后再恢复当前页签高度，并沿用平滑高度过渡。
 - 首尾保留阻尼反馈，但回弹位移最大为 16 CSS px，不允许拉出大片空白。
 - 保留浏览器原生纵向滚动、图片点击放大、取消复位与无障碍页签行为。不尝试拦截微信系统返回手势。

 验证：`node h5/test/report-touch-layout.mjs` 检查真实移动触摸横滑、斜滑、文字区不切页、图片与文字区竖向滚动、拖动期间高度不变、边缘位移上限和原有布局/交互；`node h5/test/profile-interaction.mjs` 回归共用滑动组件的基础信息页。

+新增回归覆盖横移 60px/纵移 75px、横移 80px/纵移 90px 的六段真实触摸路径（之前均会触发 `pointercancel` 并竖滚）。现在每组三张报告卡都检查松手前跟手位移、无浏览器取消、正确切页，以及拖动中/松手后竖向位置均不变。本地报告、基础信息交互和算法 86 条断言均通过；不调用付费检测或写入报告。
+
 之前的竖向优先版本已发布；当前横向优先版本已通过本地报告交互测试，按用户要求发版。发布沿用 Git bundle 快进同步至 `/home/ubuntu/juzi`，重启 `juzi-h5.service`，再经公网运行同一报告交互测试并检查服务健康及静态资源一致性。不代用户推送 origin，不包含未追踪的 `new_feedback/`。最终手机微信体验仍需真机复验。