jQuery Fancybox maxHeight属性异常，弹窗滚动条显示异常求助

预期正常表现 #

• 弹窗高度应随行的添加或删除动态自适应变化
• 当弹窗高度超过设置的maxHeight值时，需显示垂直滚动条

当前实际表现 #

1. 首次添加或删除行时，弹窗高度可动态变化，但高度超过maxHeight时未出现垂直滚动条：
   
2. 关闭弹窗后再次添加行，高度超过maxHeight时，垂直滚动条正常显示：
   

问题代码 #

$.fancybox.open({ 
  href: '#advancedSearchWrapper', 
  minHeight: 200, 
  maxHeight: 450 , 
  fitToView: true, 
  autoSize: false, 
  autoWidth: true, 
  modal: true, 
  autoScale: true, 
  padding: 30
}); 

可能的解决方案 #

这个问题大概率是首次初始化弹窗后，fancybox没有实时监听内容高度变化并重新计算滚动逻辑，试试下面几种解决思路：

方法1：操作后手动触发尺寸重计算 #

在添加/删除行的逻辑执行完成后，调用fancybox的update方法强制重新计算弹窗尺寸：

// 示例：添加行按钮的点击事件
$('.add-row-btn').on('click', function() {
  // 执行添加行的业务逻辑
  // ...
  
  // 强制更新fancybox的尺寸计算
  $.fancybox.update();
});

方法2：调整初始化配置参数 #

fitToView和autoScale两个属性可能和自定义高度逻辑冲突，尝试调整配置并添加内容监听：

$.fancybox.open({ 
  href: '#advancedSearchWrapper', 
  minHeight: 200, 
  maxHeight: 450 , 
  fitToView: false, // 关闭视图自适应，优先遵循自定义高度设置
  autoSize: false, 
  autoWidth: true, 
  modal: true, 
  autoScale: false, // 关闭自动缩放，避免干扰高度计算
  padding: 30,
  afterShow: function() {
    // 弹窗显示后，监听内容DOM变化，实时更新尺寸
    $('#advancedSearchWrapper').on('DOMSubtreeModified', function() {
      $.fancybox.update();
    });
  }
});

方法3：直接给内容容器设置滚动样式 #

绕过fancybox的尺寸计算，直接给弹窗内部的内容容器添加CSS样式，强制实现滚动逻辑：

#advancedSearchWrapper {
  max-height: 400px; /* 减去fancybox设置的padding值，根据实际情况调整 */
  overflow-y: auto;
}

这种方式更稳定，不管fancybox的尺寸计算逻辑如何，内容容器自身会在高度超限后显示滚动条。

内容的提问来源于stack exchange，提问作者Senle.Bao