禁用fullpage.js上的触摸滑动 [英] Disable touch swipe on fullpage.js

问题描述

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

I'm using the fullpage.js plugin for a single page marketing site.

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

I'm using navigation links to jump to scenes (all horizontal) around the site so I want to disable to the touch/swipe (between scenes) feature as it interferes with other touch elements.

我已经完成了所有文档，但我可以找不到如何做到这一点。

I've been though all the documentation but I can't find out how to achieve this.

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

Any help is welcome. Thanks, Jack.

推荐答案

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

Just use the option autoScrolling:false when initializing the plugin. This way the mouse wheel won't swipe and neither the touch events will.

如果你想让鼠标滚轮滚动（对于电脑）但是禁用触摸事件（触摸设备），然后我建议你以不同的方式为触摸设备初始化插件。
为了做到这一点，我建议你做类似这样的事情。

If you want to keep the mouse wheel scrolling (for computers) but disable the touch events (touch devices), then I would recommend you to initialize the plugin in a different way for touch devices. In order to do so, I recommend you to do something like this.

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

You can use the options responsiveWidth or responsiveHeight as well as the class fp-auto-height-responsive.

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

The options will disable the autoScrolling feature for mobile devices under the specified dimensions. Examples available in the examples folder of fullPage.js or online.

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

You can also use responsiveSlides and force the transformation of horizontal slides into vertical sections on responsive. This can be done through the Responsive Slides extension.

---

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

---

A method named $.fn.fullpage.setAllowScrolling can also be used with this same purpose. It will disable both the touch scrolling and the mouse scrolling.

---

autoScrolling：false 仅禁用垂直滚动。
如果你想要禁用横向的那个，那么现在就无法做到。你需要修改一下这个插件。

---

autoScrolling:false only disables the vertical scrolling. If you want also to disable the horizontal one, there's no way to do it right now. You would need to modify a bit the plugin.

在fullpage.js中取代它：

Inside fullpage.js replaces this:

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 回调如此：

And then, when you initialize the plugin, call that public function in the afterRender callback like so:

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

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

Don't call fullpage twice. Just add the afterRender function inside your initialization.

这篇关于禁用fullpage.js上的触摸滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！