Javascript 在fullpage.js上禁用触摸滑动_Javascript_Jquery_Touch_Swipe_Fullpage.js

Javascript 在fullpage.js上禁用触摸滑动

javascript jquery

Javascript 在fullpage.js上禁用触摸滑动,javascript,jquery,touch,swipe,fullpage.js,Javascript,Jquery,Touch,Swipe,Fullpage.js,我正在为一个单页营销网站使用fullpage.js插件我使用导航链接跳转到站点周围的场景（全部水平），因此我想禁用触摸/滑动（场景间）功能，因为它会干扰其他触摸元素我已经阅读了所有的文档，但我不知道如何实现这一点欢迎任何帮助。谢谢，杰克。初始化插件时只需使用选项自动滚动：false。这样，鼠标滚轮将不会滑动，触摸事件也不会如果您想保持鼠标滚轮滚动（对于计算机），但禁用触摸事件（触摸设备），那么我建议您以不同的方式为触摸设备初始化插件。为了做到这一点，我建议你这样做 2016年更新：您

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

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

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

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

初始化插件时只需使用选项

自动滚动：false

。这样，鼠标滚轮将不会滑动，触摸事件也不会

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

2016年更新：您可以使用选项

responsiveWidth

或

responsiveHeight

以及类

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

Examples

文件夹中找到

您还可以使用

responsiveSlides

并强制在responsiveSlides上将水平幻灯片转换为垂直部分。这可以通过

2014年9月更新：

名为

$.fn.fullpage.setAllowScrolling

的方法也可用于此目的。它将禁用触摸滚动和鼠标滚动

2014年6月更新：

自动滚动：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

函数。

初始化插件时只需使用

autoScrolling:false

选项。这样，鼠标滚轮将不会滑动，触摸事件也不会

2016年更新：您可以使用选项

responsiveWidth

或

responsiveHeight

以及类

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

Examples

文件夹中找到

您还可以使用

responsiveSlides

并强制在responsiveSlides上将水平幻灯片转换为垂直部分。这可以通过

2014年9月更新：

名为

$.fn.fullpage.setAllowScrolling

的方法也可用于此目的。它将禁用触摸滚动和鼠标滚动

2014年6月更新：

自动滚动：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

函数。

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

$.fn.fullpage.setAllowScrolling（false，“左，右”）

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

$.fn.fullpage.setAllowScrolling（false，“左，右”）

截至2017年6月，之前的方法都不适用于我。我发现的有效禁用touch的最简单方法如下

在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();
    }
}

初始化fullpage时，它会自动调用

setAllowScrolling（true）

，触发上面的

else if（value）

条件。只需注释掉对

addTouchHandler（）

的调用即可完全禁用它，或者为调用它添加某种条件，例如

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

使用这种方法，点击时左右箭头仍然有效，因此水平幻灯片仍然可以导航。应该注意的是，使用

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

也将禁用箭头。

截至2017年6月，以前的方法都不适用于我。我发现的有效禁用touch的最简单方法如下