Webkit滚动吸附Bug：html为滚动容器时锚点/scrollIntoView失效？

这属于iOS 16 Safari的已知兼容性Bug，并非自身配置错误。

问题原因 #

• 当把<html>设为滚动容器并启用scroll-snap规则时，Safari的滚动锚点处理逻辑与滚动吸附机制存在冲突，导致锚点链接跳转或scrollIntoView()方法调用无法稳定触发吸附定位，常出现滚动位置偏移、吸附完全失效的情况。
• 选择<html>作为滚动容器是合理需求——iOS Safari的地址栏自动隐藏功能依赖于根滚动容器（即<html>/<body>），使用其他自定义容器会直接导致该功能失效。

临时解决方案 #

• 手动触发滚动吸附修正：在锚点跳转或scrollIntoView()调用后，通过微小的滚动偏移强制Safari重新计算吸附位置，示例代码：

// 执行锚点跳转或scrollIntoView
document.getElementById('target-section').scrollIntoView({ behavior: 'smooth' });
// 延迟触发修正，适配Safari的滚动时序
setTimeout(() => {
  window.scrollBy(0, 1);
  window.scrollBy(0, -1);
}, 100);

• 条件性降级处理：针对iOS 16设备，可通过UA检测对<html>的滚动吸附规则做调整，比如暂时简化吸附逻辑或仅在非iOS环境下启用完整吸附，优先保障锚点跳转的核心功能可用。

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