FullPage.JS 分屏。在移动设备上使其成为一页样式答案

【问题标题】：FullPage.JS split screened. On mobile device make it one page styleFullPage.JS 分屏。在移动设备上使其成为一页样式
【发布时间】：2019-09-04 20:08:51
【问题描述】：

我在 FullPage.js 库中找到了分屏功能的 great example。这是demo。

我在这里创建了一个jsFiddle demo，但有一个例外，它不是全屏。

#splitscreen > .section .column-left {
  float: left;
  width: 50%;
  color: #000;
  background: #fff;
}

#splitscreen > .section .column-right {
  float: right;
  width: 50%;
  color: #fff;
  background: #000;
}

#splitscreen > .section .column-left {
  transition: all 1s ease 0s;
  transform: translateY(100%);
  backface-visibility: hidden;
}

#splitscreen > .section .column-right {
  transition: all 1s ease 0s;
  transform: translateY(-100%);
  backface-visibility: hidden;
}

#splitscreen > .section.active {
  z-index: 1;
}

#splitscreen > .section.active .column-left {
  transform: translateY(0);
}

#splitscreen > .section.active .column-right {
  transform: translateY(0);
}

#splitscreen > .section.active ~ .section .column-left {
  transform: translateY(-100%);
}

#splitscreen > .section.active ~ .section .column-right {
  transform: translateY(100%);
}

/* prevent fullpage from translating the page */
#splitscreen {
  transform: translate3d(0px, 0px, 0px) !important;
}

#splitscreen > .section {
  position: absolute;
  top: 0;
  left: 0;
}

但问题是如何修改原始代码以使 FullPage.js 在默认幻灯片状态下工作？换句话说，一旦检测到移动设备（媒体查询），就会强制 FullPage.js 使用单页样式。

UPD：一旦检测到移动设备，我已经添加了这个 JS 和 CSS 来销毁 FullPage 配置。但它纯粹适用于 CSS。如何在移动设备上使用一页样式重新启动它？

$(document).ready(function () {

    'use strict';

    var fullPageCreated = false;
    createFullpage();

    function createFullpage() {
        if (fullPageCreated === false) {
            fullPageCreated = true;
            $('#splitscreen').fullpage({
                scrollingSpeed: 1000,
                responsiveWidth: 740,
                verticalCentered: false,
                anchors: [''],
                navigation: true,
                navigationPosition: 'left',
                css3: true,
                scrollingSpeed: 800,
                autoScrolling: true,
                fitToSection: true,
                fitToSectionDelay: 1000,
                scrollBar: false,
                easing: 'easeInOutCubic',
                easingcss3: 'ease',

                keyboardScrolling: true,
                animateAnchor: true,
                recordHistory: true
            });
        }
    }

function createFullpageMob() 
   {         

        $('#splitscreen').fullpage({
            scrollingSpeed: 100000, /*for debug purpose*/
            responsiveWidth: 500,
            verticalCentered: false,
            anchors: [''],
            navigation: false,                
            css3: true,
            scrollingSpeed: 10800, /*for debug purpose*/
            autoScrolling: true,
            fitToSection: true,
            fitToSectionDelay: 1000,
            scrollBar: true,
            easing: 'easeInOutCubic',
            easingcss3: 'ease',

            keyboardScrolling: true,
            animateAnchor: true,
            recordHistory: true
        });

}  

    if (document.documentElement.clientWidth < 400) {
        $.fn.fullpage.destroy('all');
    }

    $(window).resize(function () {
        if ($(window).width() > 400) {
            createFullpage();
        } else {
            if (fullPageCreated == true) {
                fullPageCreated = false;
                $.fn.fullpage.destroy('all');
                createFullpageMob();/*seems that it's initizlized, but doesn't work*/
            }
        }

    });


});

CSS

@media only screen and (max-width : 420px) {

    #splitscreen > .section .column-left {

        width: 100%;
    }

    #splitscreen > .section .column-right {

        width: 100%;
    }
}

【问题讨论】：

您可以考虑使用multiScroll.js（同一作者），然后使用Responsive Expand extension 将两边变成一个全宽部分。
我对@987654329@ 函数做了一些调整。但现在我不知道如何在移动设备上正确重新启动FullPage...我已经更新了我的问题

标签： css media-queries responsive fullpage.js

【解决方案1】：

我敢打赌你现在已经对它进行了排序，但我要做的是在 say body 上添加一个类，并将其用作所有分屏 fullPage 修改的名称空间。因此，当类从正文中删除时，您的分屏样式不再处于活动状态，并且有效地恢复为原始的 fullPage 行为。

【讨论】：