javascript - 单选和复选框输入不适用于scrollOverflow = true(仅在移动设备上)

我正在使用什么？

我正在使用FullPage.js和scrollOverflow。

我的设置

这些是我的设定

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

问题说明

我有一个具有无线电和复选框输入的联系表单，但这些输入在scrollOverflow等于true的移动设备中不起作用。他们可以在台式机上工作。

如果我将scrollOverflow更改为false，则输入在移动设备上有效，但scrollOverflow无效，这是必需的，因为联系表单对于移动设备很长。

现场例子

您可以在此实时示例1上看到scrollOverflow = true（启用），但是单选和复选框输入在移动设备上不起作用。

https://gramerlab.com/a1.html

在这些示例2中，我禁用了scrollOverflow = false，并且单选按钮和复选框输入在移动设备上可以使用，但是scrollOverflow无法使用，如果联系表单很长并且需要滚动，则不好。

https://gramerlab.com/a2.html

有谁知道如何解决这个问题？

最佳答案

解决了

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

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>