宏大的弹出窗口在 iPhone 上出现滚动问题答案

【问题标题】：Magnific popup has scroll problems on the iPhone宏大的弹出窗口在 iPhone 上出现滚动问题
【发布时间】：2015-08-28 18:00:25
【问题描述】：

我正在使用 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...'
    });
}

【问题讨论】：

标签： javascript jquery ios iphone magnific-popup

【解决方案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>

【讨论】：

只为我工作$('html').animate({ scrollTop: startWindowScroll }, 0); 工作