Javascript 收音机和复选框输入不适用于scrollOverflow=true（仅在移动设备上）

我在用什么？

我正在使用带有scrollOverflow的FullPage.js

我的设置

这些是我的设置

<script>
$(document).ready(function() {
    $('#fullpage').fullpage({
        //Navigation
        sectionsColor: ['#06C', '#C06', '#930', '#06C'],
        anchors: ['aa', 'bb', 'cc', 'dd'],
        menu: '.menu',
        navigation: true,
        scrollOverflow: false, /* True or False Depending */
        scrollBar: true,
        fixedElements: '.header',
        paddingTop: '3em',
        slidesNavigation: true,
        paddingBottom: '1em'
            });
});
</script>

$（文档）.ready（函数（）{
$（“#全页”）。全页({
//航行
章节颜色：['#06C'、'#C06'、'#930'、'#06C']，
主播：['aa'，'bb'，'cc'，'dd']，
菜单：'.menu'，
导航：对，
scrollOverflow:false、/*True或false，具体取决于*/
滚动条：对，
固定元素：'.header'，
paddingTop:'3em'，
幻灯片导航：正确，
填充底部：“1em”
});
});

问题解释

我有一个联系人表单，它有收音机和复选框输入，但这些输入在scrollOverflow等于true的移动设备中不起作用。不过他们在台式机上工作

如果我将scrollOverflow更改为false，则输入在mobile上工作，但scrollOverflow不工作，这是必需的，因为联系人表单对于mobile很长

实例

您可以在这个实时示例1中看到scrollOverflow=true（enable），但收音机和复选框输入在移动设备上不起作用

在这些示例2中，我禁用了scrollOverflow=false，并且收音机和复选框输入在移动设备上工作，但是scrollOverflow不工作，如果联系人表单很长，我需要滚动，这是不好的

---

有人知道如何解决此问题吗？已解决

我只需要在我的内部脚本中添加以下几行

scrollOverflowOptions: {
   click:false, 
   preventDefaultException: {tagName: /.*/}
} 

最初我有这样一个：

<script>
$(document).ready(function() {
    $('#fullpage').fullpage({
        //Navigation
        sectionsColor: ['#06C', '#C06', '#930', '#06C'],
        anchors: ['aa', 'bb', 'cc', 'dd'],
        menu: '.menu',
        navigation: true,
        scrollOverflow: true,
        scrollBar: true,
        fixedElements: '.header',
        paddingTop: '3em',
        slidesNavigation: true,
        paddingBottom: '1em',
    });
});
</script>

<script>
$(document).ready(function() {
    $('#fullpage').fullpage({
        //Navigation
        sectionsColor: ['#06C', '#C06', '#930', '#06C'],
        anchors: ['aa', 'bb', 'cc', 'dd'],
        menu: '.menu',
        navigation: true,
        scrollOverflow: true,
        scrollBar: true,
        fixedElements: '.header',
        paddingTop: '3em',
        slidesNavigation: true,
        paddingBottom: '1em',
        scrollOverflowOptions: {
            click:false,    
            preventDefaultException: {tagName: /.*/}
        } 
    });
});
</script>

$（文档）.ready（函数（）{
$（“#全页”）。全页({
//航行
章节颜色：['#06C'、'#C06'、'#930'、'#06C']，
主播：['aa'，'bb'，'cc'，'dd']，
菜单：'.menu'，
导航：对，
对,，
滚动条：对，
固定元素：'.header'，
paddingTop:'3em'，
幻灯片导航：正确，
填充底部：“1em”，
});
});

现在我有了这个：

<script>
$(document).ready(function() {
    $('#fullpage').fullpage({
        //Navigation
        sectionsColor: ['#06C', '#C06', '#930', '#06C'],
        anchors: ['aa', 'bb', 'cc', 'dd'],
        menu: '.menu',
        navigation: true,
        scrollOverflow: true,
        scrollBar: true,
        fixedElements: '.header',
        paddingTop: '3em',
        slidesNavigation: true,
        paddingBottom: '1em',
    });
});
</script>

<script>
$(document).ready(function() {
    $('#fullpage').fullpage({
        //Navigation
        sectionsColor: ['#06C', '#C06', '#930', '#06C'],
        anchors: ['aa', 'bb', 'cc', 'dd'],
        menu: '.menu',
        navigation: true,
        scrollOverflow: true,
        scrollBar: true,
        fixedElements: '.header',
        paddingTop: '3em',
        slidesNavigation: true,
        paddingBottom: '1em',
        scrollOverflowOptions: {
            click:false,    
            preventDefaultException: {tagName: /.*/}
        } 
    });
});
</script>

$（文档）.ready（函数（）{
$（“#全页”）。全页({
//航行
章节颜色：['#06C'、'#C06'、'#930'、'#06C']，
主播：['aa'，'bb'，'cc'，'dd']，
菜单：'.menu'，
导航：对，
对,，
滚动条：对，
固定元素：'.header'，
paddingTop:'3em'，
幻灯片导航：正确，
填充底部：“1em”，
滚动溢出选项：{
单击：false，
preventDefaultException:{标记名：/.*/}
} 
});
});

我在iPhone、Android和Kindle Fire设备上进行了测试。 在所有测试中，测试都是成功的。