FancyBox 2 iframe在iOS Safari输入时跳转到底部问题求助

我之前帮别人排查过一模一样的iOS Safari + FancyBox iframe问题，这其实是iOS浏览器的键盘交互逻辑和FancyBox的浮动层定位冲突导致的——当iOS弹出键盘时，会自动调整视口并尝试把焦点元素滚动到可视区域，但因为FancyBox的iframe是浮动层，这个滚动行为错误地作用到了FancyBox容器或者父页面上，就出现了跳到底部的情况。当iframe内容刚好适配高度时，没有多余滚动空间，所以不会触发这个问题。

给你几个实测有效的修复方案，基于你的现有代码修改：

1. 核心代码优化方案 #

修改FancyBox的配置，添加iOS键盘事件监听，动态调整容器高度，同时阻止父页面的无效滚动：

$(".fancyBox").fancybox({
  openEffect: 'none',
  closeEffect: 'none',
  prevEffect: 'fade',
  nextEffect: 'fade',
  tpl: {
    closeBtn: '<div title="Close" class="btn doccit-button waves-effect'+closePadding+'" id="fancyClose">'+closeText+'</div>'
  },
  topRatio : 0,
  fitToView : false,
  type : 'iframe',
  iframe : {
    preload: false,
    scrolling: 'auto' // 明确指定iframe滚动行为
  },
  padding : 12,
  beforeLoad: function () {
    if ($(this.element).data('url')) {
      var url = $(this.element).data('url');
      this.href = url
    }
  },
  beforeShow: function () {
    var fancyWidth = 1100;
    var fancyHeight = 700;
    var fancyMargin = [60,8,8,8];
    if($(this.element).data('width')) {
      fancyWidth = $(this.element).data("width")
    };
    if($(this.element).data('height')) {
      fancyHeight = $(this.element).data("height")
    };
    if($(this.element).data('margin')) {
      fancyMargin = $(this.element).data("margin")
    };
    if ($(window).width() <= 1154){
      this.width = "100%";
      // 针对iOS预留键盘空间，避免高度溢出
      this.height = $(window).height() - 120;
    } else {
      this.width = fancyWidth;
      this.height = fancyHeight;
      this.margin = fancyMargin
    };
  },
  helpers: {
    overlay: {
      locked: false,
      closeClick: false,
      css : { 'background' : 'rgba(241, 241, 241, 0.95)' }
    }
  },
  afterClose: function() {
    if($(this.element).data("autoreload") == 'ja') {
      parent.location.reload(true);
    }
    if($(this.element).data("autoredirect") == 'ja') {
      location.href = "index.asp";
    }
    var redirectUrl = $(this.element).data("autourl");
    if (redirectUrl != undefined) {
      location.href = redirectUrl;
    }
    // 清理监听事件，避免内存泄漏
    $(window).off('resize.fancybox');
    $('body').off('touchmove.fancybox');
  },
  afterShow: function () {
    $(".fancybox-wrap").draggable();
    
    var $fancyWrap = $(".fancybox-wrap");
    // 存储原始窗口高度，用于判断键盘是否弹出
    $(window).data('originalHeight', $(window).height());
    
    // 监听窗口resize，动态调整FancyBox高度
    $(window).on('resize.fancybox', function() {
      var currentHeight = $(window).height();
      var originalHeight = $(window).data('originalHeight');
      
      // iOS键盘弹出时，视口高度会大幅降低
      if(currentHeight < originalHeight - 100) {
        $fancyWrap.height(currentHeight - 80);
        $fancyWrap.find('.fancybox-skin, .fancybox-iframe').height('100%');
      } else {
        // 键盘收起时恢复原高度
        $fancyWrap.height(this.height);
        $fancyWrap.find('.fancybox-skin, .fancybox-iframe').height('100%');
      }
    });
    
    // 阻止父页面的触摸滚动，确保滚动只在iframe内部生效
    $('body').on('touchmove.fancybox', function(e) {
      if($fancyWrap.has(e.target).length === 0) {
        e.preventDefault();
      }
    });
  }
});

2. 补充：iframe内部页面优化 #

如果上述方法仍有小问题，可以在iframe加载的页面中添加这段代码，阻止iOS自动滚动到焦点元素：

// 放在iframe页面的脚本中
document.addEventListener('focusin', function(e) {
  // 记录当前滚动位置，焦点触发后强制回到原位置
  const currentScroll = window.pageYOffset;
  setTimeout(() => window.scrollTo(0, currentScroll), 0);
}, false);

关键修复点说明 #

• 针对iOS视口变化，通过resize监听动态调整FancyBox高度，避免键盘弹出时容器高度不足导致的滚动偏移
• 阻止父页面的触摸滚动，确保滚动行为仅在iframe内部生效
• 存储原始窗口高度，精准判断键盘的弹出/收起状态

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