Question

我使用Magnific弹出窗口在我的网站上显示弹出窗口，它在所有浏览器和智能手机中运行良好，但是当我用弹出窗口滚动页面时，它在iPhone上出现了问题打开，＆＃34;身体＆＃34;滚动在一起。

这是我的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>

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

1 个答案: