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>

问题解释

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

如果我将scrollOverflow设置为false，则输入可在移动设备上运行，但scrollOverflow无法正常工作，因为联系表单对于移动设备来说很长。

实时示例

您可以在此实际示例1上看到scrollOverflow = true（启用），但无线电和复选框输入在移动设备上无效。

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设备上测试过。在所有这些测试中，测试都是成功的。

收音机和复选框输入无法使用scrollOverflow = true（仅限移动设备）

1 个答案: