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

Question

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

知道为什么会发生这种情况以及如何解决它吗？

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

根据 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
            });
        }
    });
});

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

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

javascript

jquery

scroll

magnific-popup

fullpage.js