在 fullpage.js 上禁用触摸滑动

Question

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

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

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

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

Answer 1

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

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

2016 年更新：

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

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

您还可以使用 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 初始化中的函数。

Answer 2

setAllowscrolling函数也接受一个方向的第二个参数，因此可以使用以下内容来禁用左/右滚动/刷新：

$。fn.fullpage.setallowscrolling（false，'左，右'）;

Answer 3

截至 2017 年 6 月，之前的方法对我来说都不起作用。我发现有效禁用触摸的最简单方法如下。

在 jquery.fullPage.js 中你会找到该函数 setAllowScrolling

function setAllowScrolling(value, directions){
    if(typeof directions !== 'undefined'){
        directions = directions.replace(/ /g,'').split(',');

        $.each(directions, function (index, direction){
            setIsScrollAllowed(value, direction, 'm');
        });
    }
    else if(value){
        setMouseWheelScrolling(true);
        addTouchHandler();
    }else{
        setMouseWheelScrolling(false);
        removeTouchHandler();
    }
}

当整页初始化时，它会自动调用 setAllowScrolling(true), ，触发 else if(value) 条件同上。只需注释掉对 addTouchHandler() 完全禁用它，或者添加某种条件来调用它，例如

var winw = $(window).width();
if (winw > 480){
    addTouchHandler();
} 

使用此方法，左箭头和右箭头在点击时仍然有效，因此仍然可以导航水平幻灯片。应该注意的是，使用 $.fn.fullpage.setAllowScrolling(false, 'left, right'); 也将禁用箭头。