在 fullpage.js 上禁用触摸滑动

Question

我将 fullpage.js 插件用于单页营销网站。

我正在使用导航链接跳转到站点周围的场景（全部水平），因此我想禁用触摸/滑动（场景之间）功能，因为它会干扰其他触摸元素。

我已经阅读了所有文档，但我不知道如何实现这一点。

欢迎任何帮助。谢谢，杰克。

Answer 1

只需autoScrolling:false在初始化插件时使用该选项。这样鼠标滚轮就不会滑动，触摸事件也不会。

如果您想保持鼠标滚轮滚动（对于计算机）但禁用触摸事件（触摸设备），那么我建议您以不同的方式为触摸设备初始化插件。为了做到这一点，我建议你做这样的事情。

2016 年更新：

您可以使用 optionsresponsiveWidth或responsiveHeight以及 class fp-auto-height-responsive。

这些选项将禁用指定尺寸下移动设备的自动滚动功能。示例在examplesfullPage.js 或online文件夹中可用。

您还可以使用responsiveSlides并强制将水平幻灯片转换为响应式垂直部分。这可以通过响应式幻灯片扩展来完成。

2014 年 9 月更新：

命名的方法$.fn.fullpage.setAllowScrolling也可以用于此相同目的。它将禁用触摸滚动和鼠标滚动。

2014 年 6 月更新：

autoScrolling:false仅禁用垂直滚动。如果你还想禁用水平的，现在没有办法做到这一点。您需要稍微修改一下插件。

在 fullpage.js 中替换了这个：

function removeTouchHandler() {
    if (isTablet) {
        $(document).off('touchstart MSPointerDown');
        $(document).off('touchmove MSPointerMove');
    }
}

为了这：

$.fn.fullpage.removeTouchHandler = function (){ 
    if (isTablet) {
        $(document).off('touchstart MSPointerDown');
        $(document).off('touchmove MSPointerMove');
    }
};

然后，当您初始化插件时，在afterRender回调中调用该公共函数，如下所示：

$(document).ready(function() {
    $('#fullpage').fullpage({
        afterRender: function(){
            $.fn.fullpage.removeTouchHandler();
        }
    });
});

不要两次调用 fullpage。只需afterRender在初始化中添加函数即可。