javascript - Magnific 弹出窗口在 iPhone 上有滚动问题

Question

我正在使用 Magnific 弹出窗口在我的站点中显示弹出窗口，它在所有浏览器和智能手机上运行良好，但是在 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(如果你在不同的地方使用弹出窗口很有用)

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>