Fancybox 模式滚动中断，在 iOS Safari 和 Android 上更改地址和菜单栏

Question

我使用 Fancybox 为我的网站构建了 ajax 模态快速查看灯箱。 它在浏览器中运行良好，但是在 iOS Safari 和 Android 上，应用程序地址栏和菜单栏的大小变化会暂时破坏设计。

我的模态 window 的最大高度为 96%。 如果它比屏幕尺寸高（通常是这种情况），那么您可以通过触摸上下滚动。 到目前为止，一切都很好。 但是，如果您到达末尾或顶部，然后“推动”它进一步，应用程序地址栏和菜单被激活（缩小/放大/出现/消失）并且页面的背景开始滚动。 因此，焦点从灯箱中丢失，直到背景停止滚动并且您不进行交互，焦点才会正确返回到灯箱。

这会导致糟糕且令人困惑的用户体验，因为灯箱本身没有滚动，而且我位于顶部的自定义关闭按钮并不总是可见。 由于这是浏览器应用程序的行为，而不是 web 页面，我一直无法找到解决方案。

我正在使用最新版本的 Fancybox - 3.5.7。

我的代码的基本设置如下：

<a class="quicklook" data-fancybox-quicklook data-type="ajax" data-src="quicklook.ajax.php">Quick Look</a>

//jquery
$('[data-fancybox-quicklook]').fancybox({
  touch: false,
  btnTpl: { smallBtn: false }
  });

quicklook.ajax.php：

<div class="quicklook_lightbox">    

  <!--- lightbox content --->

</div>

/* css */
div.quicklook_lightbox {
  width: 97%;
  padding: 1.4em;
  max-height: 96%;
  }

感谢任何建议。

Answer 1

当用户在附近点击时，不可能 100% 避免地址栏大小的变化。 但fancybox 的下一个主要版本将支持 Visual Viewport API ( https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API )，这将大大提高移动设备上的可用性。 遗憾的是，API 最近才可用，从 iOS 13 开始。