Conflict using Magnific Popup with 'autoScrolling: false,' option from fullPage.js

Question

Opening and then closing a popup using Magnific Popup on a fullPage.js site seems to stop the autoScrolling: false, option working. So once the pop up closes you can no longer scroll manually up and down the site. You can use the menu anchors to snap to sections but not scroll. Its normal again once refreshed but will happen again after opening a popup.

Any ideas why this happens and how to resolve it?

Magnific Popup https://github.com/dimsemenov/Magnific-Popup

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

fullpage code:

<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 code

<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

Add the plugin's initialization inside the afterRender callback as per fullPage.js FAQs:

My other plugins don't work when using fullPage.js

Short answer: initialize them in the afterRender callback of fullPage.js.

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.

Like this:

$(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
            });
        }
    });
});