iOS Safari网页截图时页面自动滚至顶部的原因及解决方法

原因分析 #

• Safari系统级截图工具（Cmd+Shift+3/4/5）触发时，会短暂调整页面视口或焦点，部分Web应用的滚动监听逻辑会误判该操作，触发自动滚动。
• 部分Web应用使用scrollIntoView、scrollTop等API做自动定位，截图引发的视口变化会意外触发这些逻辑。
• Safari的焦点管理机制会在截图后将焦点重置到页面默认元素（比如body），导致页面自动滚动到焦点所在的顶部位置。

解决办法 #

• 优化滚动监听逻辑：在代码中通过event.isTrusted区分用户手动操作和系统触发的事件，只处理可信的用户滚动事件，跳过系统触发的滚动：

  window.addEventListener('scroll', (e) => {
    if (!e.isTrusted) return;
    // 原有滚动处理代码
  });
  

• 调整焦点管理：检查代码中是否存在自动聚焦到页面顶部元素的focus()调用，非必要则移除；若必须保留，可给焦点事件添加preventDefault阻止默认滚动行为。
• 使用应用内截图工具：如果Web应用自带截图功能，优先使用该功能，避免触发系统级的视口调整。
• 临时锁定滚动：截图前通过CSS临时锁定页面滚动，完成后恢复：

  /* 截图前添加 */
  body { overflow: hidden; }
  /* 截图后恢复 */
  body { overflow: auto; }
  

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