|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
# 用一个 Skill 处理吸顶抖动与锚点定位 导航吸顶时反复闪烁，点击标签后标题被遮住，页面已经到底却选不中末项。这些现象需要一起检查占位、坐标和状态。下面把排查与修复步骤整理为一个完整 Skill，让编程助手沿着同一套几何基准处理问题，并按真实滚动过程验收。 ## 完整 Skill 把下面代码块内的全部内容保存为 `sticky-anchor-stability/SKILL.md`，由支持 Skill 的助手读取使用。它是单文件 Skill，无需补充其他参考文件。 ```markdown --- name: sticky-anchor-stability description: 实现或修复 Web、H5、WebView 页面中的吸顶导航、渐变 Header、滚动选中和锚点点击定位。适用于临界闪烁、切换跳位、标题遮挡、页底选中错误及动态内容导致的坐标失效；不用于普通静态导航或无关路由改写。 --- # 吸顶锚点稳定性 在现有页面内完成吸顶、滚动选中与点击定位。优先复用已有稳定实现，只调整与需求直接相关的几何计算和状态更新，不擅自改变导航、返回或滚动恢复约定。 ## 确认现场和验收条件 1. 阅读页面、现有组件和样式，确认实际滚动容器、运行时与最低支持版本。取得可复现的原始操作路径，核对已失败或被否决的方案。 2. 查明状态栏、固定 Header、锚点栏的高度及单位。确认 Header 是否已包含状态栏，避免重复计算；吸顶 top 与点击偏移共用同一份几何数据。 3. 明确产品指定的吸顶边界元素、区块对应关系、平滑滚动行为及刷新和前进后退时的恢复要求。可从项目确认的约定不再重复询问，缺少关键条件时再澄清。 4. 用实际滚动记录预期与异常，区分占位变化、阈值反复、过期坐标和定位竞争，不先叠加 top、延时或缩放补丁。 ## 稳定布局和状态 - 需要普通层与固定层切换时，让普通层始终占位，固定层独立显示。两层共享选中状态和点击函数，切换不增删占位高度。 - 原始边界取自产品指定元素的稳定坐标。不能让固定层显隐或定位模式切换改变下一次判断的依据。 - 分别保存是否吸顶、选中项、原始边界、区块坐标、上次滚动距离及待执行帧。Header 渐变由独立进度控制，不混入选中状态。 - 切换优先只改 opacity，不使用缩放、布局属性动画或 transition: all。实测为亚像素白缝时可局部覆盖 1px；不在多层叠加魔法偏移。 - 隐藏层关闭 pointer-events、键盘焦点和无障碍暴露；仅透明或仅禁用指针不算完成。按运行时支持评估 inert 或等效处理，并妥善转移隐藏层内已有焦点。 ## 合并滚动更新 1. 在布局完成后缓存区块绝对坐标及最大滚动距离。所有坐标归一到实际滚动容器；页面滚动和嵌套容器不能混用坐标。 2. 滚动监听声明 passive，热路径只记录最新 scrollTop 并提交一次 requestAnimationFrame。已有待执行帧时不重复提交；帧内统一更新状态，不反复测量状态相关 DOM。 3. 不用时间防抖等待停手才更新选中态。rAF 用来组织同帧更新，不宣称它必然降低 scroll 事件频率；passive 也不替代减少测量。 4. 进入吸顶条件使用 boundary + enterOffset，退出使用 boundary − exitOffset，中间区间保持旧状态。偏移按实际交互验证，不套用某台设备的经验值。 ## 统一点击定位与滚动选中 - 使用目标值：区块顶部 − 固定 Header 高度 − 吸顶锚点高度。根据同一坐标体系将目标限制到 0 与最大滚动距离之间。 - 点击立即更新选中反馈。定位完成后，以同一套区块坐标校准；使用平滑滚动时，处理途中经过其他区块、连续点击和用户主动打断，避免旧目标覆盖最新操作。 - 到页底明确选中末项，不能要求最后一个短区块必须滚到无法到达的位置才选中。向上跨区时可按交互需要增加小幅滞回，并回归反向滚动。 - 核对定位后的区块标题未被 Header 或锚点栏遮挡，普通层和吸顶层的点击结果一致。 ## 处理动态变化与退出 - 数据、图片、字体、展开收起、图表显隐或窗口变化后，等待相关 DOM 或资源更新完成，再合并重测原始边界、区块坐标和最大滚动距离。 - 不用每次滚动重测整页来代替明确的失效条件，也不只监听窗口宽度。 - 按产品要求恢复滚动。明确要求回顶部时，在能力允许的环境设置 history.scrollRestoration 为 manual，并在初始化及相应 pageshow 路径归零。manual 本身不会自动滚到顶部。 - 需要恢复原位置时沿用对应策略，不擅自归零。卸载恢复修改前的 scrollRestoration，清理监听并取消待执行动画帧。 ## 按原始路径验收 - 慢速跨越边界及边界往返，不闪烁、不缩放、不跳位；Header 无白缝，内容不穿透。 - 逐项点击、快速连续点击、平滑滚动打断均定位正确，标题未遮挡；页底末项选中，向上跨区能恢复。 - 图片与字体加载、内容展开收起、数据更新后再次定位，坐标仍准确。 - 刷新、前进后退及 pageshow 符合既定恢复要求；隐藏层不接收点击或焦点，不重复暴露给辅助技术。 - 用目标移动设备或等效视口检查真实滚动和亚像素边界。静态截图不能代替过程验证，浏览器成功不能证明未验证的 WebView 已兼容。 ## 交付 简要给出根因、修改位置、坐标和状态处理方式、实际验证的运行时与设备范围、验收结果及未完成项。缺少目标设备或仍有异常时明确缺口，不宣称全部通过。 ``` ## 调用示例 “使用 sticky-anchor-stability 检查当前详情页。导航在吸顶边界上下滑动时会闪烁，点击第二个标签后标题被遮住。保留现有平滑滚动和返回行为，在原页面修复并验证。” “使用 sticky-anchor-stability 实现本页目录导航。页面有固定 Header，最后一个内容区较短，图片会异步加载。沿用项目已有组件，保证页底末项选中，并验证图片加载后定位仍准确。” |