单选和复选框输入不适用于 scrollOverflow=true（仅在移动设备上）答案

【问题标题】：Radio and Checkbox Inputs Not Working With scrollOverflow=true (On Mobile Only)单选和复选框输入不适用于 scrollOverflow=true（仅在移动设备上）
【发布时间】：2017-03-31 08:00:22
【问题描述】：

我在用什么？

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

问题说明

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

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

活生生的例子

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

https://gramerlab.com/a1.html

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

https://gramerlab.com/a2.html

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

【问题讨论】：

标签： javascript jquery mobile checkbox radio-button

【解决方案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 设备上进行了测试。在所有这些中，测试都是成功的。

【讨论】：