Question

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

为什么会发生这种情况以及如何解决这个问题？

Magnific Popup 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回调中添加插件的初始化：

使用fullPage.js时，我的其他插件无法正常工作

  简答：在fullPage.js的afterRender回调中初始化它们。

  说明：如果您使用的选项如verticalCentered：true或overflowScroll：true of fullPage.js，您的内容将被包装在其他元素中，以更改其在网站的DOM结构中的位置。这样，您的内容将被视为＆＃34;动态添加的内容＆＃34;并且大多数插件需要最初在网站上执行任务的内容。使用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
            });
        }
    });
});

使用Magnific Popup与＆＃39; autoScrolling冲突：false，＆＃39; fullPage.js中的选项

1 个答案: