javascript - 单选按钮和复选框输入无法与scrollOverflow=true一起使用(仅在移动设备上)

Question

我正在使用什么？

我正在使用带有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>

问题说明

我有一个联系表单，其中包含单选按钮和复选框输入，但这些输入在滚动溢出等于 true 的移动设备中不起作用。但它们可以在桌面上运行。

如果我将scrollOverflow更改为false，则输入可以在移动设备上工作，但scrollOverflow不起作用，这是需要的，因为联系表单对于移动设备来说很长。

实例

您可以在此实例 1 中看到scrollOverflow=true(启用)，但单选按钮和复选框输入在移动设备上不起作用。

1. https://gramerlab.com/a1.html

在这些示例2中，我禁用了scrollOverflow=false，并且单选和复选框输入可以在移动设备上工作，但scrollOverflow不起作用，如果联系表单很长并且我需要滚动，这会很糟糕。

https://gramerlab.com/a2.html

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

Answer 1

已解决

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

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>

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