javascript - 使用 Magnific Popup 与 fullPage.js 中的 'autoScrolling: false,' 选项发生冲突

Question

在 fullPage.js 网站上使用放大弹出窗口打开然后关闭弹出窗口似乎会停止 autoScrolling: false, 选项的工作。因此，一旦弹出窗口关闭，您就无法再手动在网站上上下滚动。您可以使用菜单 anchor 来捕捉部分，但不能滚动。刷新后就正常了，但是打开弹窗后又会出现这种情况。

有什么想法为什么会发生这种情况以及如何解决它吗？

华丽的弹出窗口 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>

放大的弹出代码

<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

按照 fullPage.js FAQs 在 afterRender 回调中添加插件的初始化:

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.

像这样:

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