Magnific popup在iPhone上有滚动问题

我正在使用Magnificpopup窗口来显示我的网站中的popup窗口，在所有的浏览器和智能手机中都能正常工作，但是当我使用popup窗口打开“body”滚动页面时，它在iPhone上发生了问题。

这是我的jQuery代码：

if ($.fn.magnificPopup) { $('.open-popup').magnificPopup({ type: 'inline', alignTop: true, midClick: true, fixedContentPos: true, removalDelay: 300, mainClass: 'modulos-popup fade-popup' }); $.extend(true, $.magnificPopup.defaults, { tClose: 'Fechar (Esc)', tLoading: 'Carregando...' }); } 

Answer 1

是的，我面临着同样的问题，似乎下面的补丁正在为我工​​作：

utils.js（如果你在不同的地方使用popup窗口很有用）

 window.Utils = { magnificPopupConfiguration: function() { var startWindowScroll = 0; return { beforeOpen: function() { startWindowScroll = $(window).scrollTop(); $('html').addClass('mfp-helper'); }, close: function() { $('html').removeClass('mfp-helper'); setTimeout(function(){ $('body').animate({ scrollTop: startWindowScroll }, 0); }, 0); } } } } 

CSS：

 .mfp-wrap { -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0); } html.mfp-helper { height: 100%; body { overflow: hidden; height: 100%; -webkit-transform: translateZ(0); } } 

准备js：

  $(document).ready(function() { if ($('.open-popup-link').length) { startWindowScroll = 0; $('.open-popup-link').magnificPopup({ type: 'inline', midClick: true, fixedContentPos: true, callbacks: Utils.magnificPopupConfiguration() }); } }); 

HTML：

  <a class="open-popup-link" href="#your-html-content">text link</a>