2016年更新：

Question

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

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

我已经阅读了所有文档，但我无法了解如何实现这一目标。

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

Answer 1

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

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

2016年更新：

您可以使用responsiveWidth或responsiveHeight选项以及fp-auto-height-responsive课程。

这些选项将禁用指定尺寸下的移动设备的autoScrolling功能。 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回调中调用该公共函数，如下所示：

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

请勿拨打全页两次。只需在初始化中添加afterRender函数。

Answer 2

setAllowScrolling函数还接受方向的第二个参数，因此以下内容可用于禁用左/右滚动/滑动：

$。fn.fullpage.setAllowScrolling（false，'left，right'）;

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');也会禁用箭头。

禁用fullpage.js上的触摸滑动

3 个答案:

2016年更新：

2014年9月更新：

2014年6月更新：