Конфликт с использованием Magnific Popup с опцией 'autoScrolling: false', от fullPage.js

Question

Открытие и закрытие всплывающего окна с использованием Magnific Popup на сайте fullPage.js, кажется, останавливают autoScrolling: false, опция работает. Итак, как только всплывающее окно закрывается, вы больше не можете прокручивать вручную вверх и вниз по сайту. Вы можете использовать привязки меню для привязки к разделам, но не для прокрутки. Его нормальная снова после обновления, но произойдет снова после открытия всплывающего окна.

Любые идеи, почему это происходит и как его решить?

Magnific Всплывающие https://github.com/dimsemenov/Magnific-Popup

fullPage.js https://github.com/alvarotrigo/fullPage.js/

код Вся страница:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#fullpage').fullpage({ 
      anchors: ['section1','section2'], 
      navigation: false, 
      scrollOverflow:false, 
      showActiveTooltip:true, 
      slidesNavigation: false, 
      menu:'.menu', 
      fixedElements: '#header, #footer', 
      paddingTop:'140px', 
      autoScrolling: false, 
      scrollOverflow: false     
    }); 
</script> 

Magnific код Popup

<script type="text/javascript">//<![CDATA[ 
$(document).ready(function() { 
$('.media').magnificPopup({ 
     removalDelay: 500, //delay removal by X to allow out-animation 
     gallery:{enabled:true}, 
     image:{titleSrc: 'title'}, 
callbacks: { 
beforeOpen: function() { 
    this.st.mainClass = this.st.el.attr('data-effect'); 
} 
}, 
closeOnContentClick: true, 
midClick: true 
}); 
}); 
//]]> 
</script> 

MagnificPopup HTML

<a href="assets/gallery/Q-awards-1024x682.jpg" class="media mfp-image" data-effect="mfp-zoom-out" title="MEDIA"><img src="image.png" width="100%"></a> 

Answer 1

Добавить инициализации плагина внутри afterRender обратного вызова согласно fullPage.js FAQs:

Мои другие плагины не работают при использовании fullPage.js

Короткий ответ: инициализировать их в afterRender обратный вызов fullPage.js.

Пояснение: Если вы используете такие параметры, как verticalCentered: true или overflowScroll: true для fullPage.js, ваш контент будет обернут внутри других элементов, изменив свое положение в структуре DOM сайта. Таким образом, ваш контент будет рассматриваться как «динамически добавленный контент», и большинству плагинов необходимо, чтобы контент был первоначально на сайте для выполнения своих задач. Используя обратный вызов afterRender для инициализации ваших плагинов, fullPage.js обязательно инициализирует их только тогда, когда fullPage.js перестает изменять структуру DOM сайта.

Как это:

$(document).ready(function() { 
    $('#fullpage').fullpage({ 
     anchors: ['section1', 'section2'], 
     navigation: false, 
     scrollOverflow: false, 
     showActiveTooltip: true, 
     slidesNavigation: false, 
     menu: '.menu', 
     fixedElements: '#header, #footer', 
     paddingTop: '140px', 
     autoScrolling: false, 
     scrollOverflow: false, 
     afterRender: function() { 
      $('.media').magnificPopup({ 
       removalDelay: 500, //delay removal by X to allow out-animation 
       gallery: { 
        enabled: true 
       }, 
       image: { 
        titleSrc: 'title' 
       }, 
       callbacks: { 
        beforeOpen: function() { 
         this.st.mainClass = this.st.el.attr('data-effect'); 
        } 
       }, 
       closeOnContentClick: true, 
       midClick: true 
      }); 
     } 
    }); 
});