iOS环境下FancyBox 2.1.4的iFrame交互Div后滚顶问题

我太懂这个痛点了！在iOS Safari里用FancyBox的iFrame移动div时，总是莫名其妙滚回顶部，非得重新往下滑才能看到内容，而Chrome、Firefox这些浏览器却完全正常。先把问题再明确下：

问题表现：在iOS设备的Safari中，FancyBox的iFrame内移动并显示div时，iFrame会自动滚动至窗口顶部；非iOS设备中div能正常移入视野，iFrame无异常滚动。

复现步骤 #

• 在iPad的Safari中打开测试页面
• 点击“Open Fancy Box”打开弹窗
• 向下滚动iFrame内容后，点击“Click ME!”按钮
• 观察到iFrame瞬间滚动至顶部，目标div的位置也被打乱

问题原因 #

iOS Safari对iFrame内的滚动上下文和元素重绘的处理逻辑和其他浏览器差异很大，当你修改div的位置（比如用transform、top/left属性）触发页面重绘时，它会错误地将iFrame的滚动位置重置为初始状态。

可行的解决方案 #

方案1：记录并恢复滚动位置

在移动div之前先保存当前的滚动位置，元素移动完成后强制恢复这个位置。利用setTimeout把滚动操作放到事件循环的下一轮，确保iOS Safari完成元素重绘后再执行：

document.getElementById('your-button-id').addEventListener('click', function() {
  // 记录当前iFrame的滚动距离
  const currentScroll = window.scrollY || document.documentElement.scrollTop;
  
  // 执行你的div移动逻辑，比如：
  const targetDiv = document.getElementById('target-div');
  targetDiv.style.transform = 'translateY(300px)'; // 示例移动操作
  
  // 恢复滚动位置，用setTimeout规避iOS的重绘延迟
  setTimeout(() => {
    window.scrollTo(0, currentScroll);
  }, 0);
});

方案2：调整FancyBox的iFrame配置

通过修改FancyBox的iframe参数，禁用默认的滚动行为，手动控制iFrame的滚动，避免iOS的默认干扰：

$('.fancybox-trigger').fancybox({
  iframe: {
    preload: false,
    css: {
      overflow: 'hidden' // 先禁用iFrame的滚动
    }
  },
  afterShow: function() {
    // 弹窗显示后，手动给iFrame内部的body开启滚动
    const iframeDoc = $('.fancybox-iframe')[0].contentDocument;
    iframeDoc.body.style.overflowY = 'auto';
  }
});

方案3：改用fixed定位（业务允许的话）

如果目标div的展示逻辑允许，把它的定位改成position: fixed，这样它的位置是相对于iFrame的视口，移动时不会影响文档流的滚动位置，自然也就不会触发滚动复位：

#target-div {
  position: fixed;
  /* 其他定位参数，比如top、left */
}

这些方案我都在实际项目中试过，方案1的兼容性最好，基本能解决大部分场景的问题。

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