使用放大弹出窗口与“自动滚动:假”冲突，整页.js的选项

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

本文关键字：冲突 整页 选项 js 自动滚动 滚动 放大 窗口      更新时间：2023-09-26

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

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

华丽的弹出窗口https://github.com/dimsemenov/Magnific-Popup

整页.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>

放大弹出式网页

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

根据整页在afterRender回调中添加插件的初始化.js 常见问题解答：

我的其他插件在使用整页时不起作用.js

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

说明：如果您使用诸如 verticalCentered：true 或 overflowScroll：true of 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
            });
        }
    });
});
相关文章：