javascript - 在 fullpage.js 上禁用触摸滑动

Question

我正在为单页营销网站使用 fullpage.js 插件。

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

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

欢迎任何帮助。谢谢， jack 。

Answer 1

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

如果您想保持鼠标滚轮滚动(对于计算机)但禁用触摸事件(触摸设备)，那么我建议您以不同的方式为触摸设备初始化插件。为此，我建议您执行 something like this .

2016 年更新:

您可以使用选项 responsiveWidth 或 responsiveHeight 以及类 fp-auto-height-responsive .

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

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

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 回调中调用该公共(public)函数，如下所示:

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

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