Deaktivieren Sie den Touch-Swipe auf der ganzen Seite.js

Question

Ich benutze die ganze Seite.js-Plugin für eine einseitige Marketing-Site.

Ich verwende Navigationslinks, um zu Szenen (alle horizontal) auf der Site zu springen, daher möchte ich die Touch / Swipe-Funktion (zwischen Szenen) deaktivieren, da sie andere Touch-Elemente stört.

Ich habe die gesamte Dokumentation durchgesehen, kann aber nicht herausfinden, wie ich das erreichen kann.

Jede Hilfe ist willkommen.Danke, Jack.

Answer 1

Verwenden Sie einfach die Option autoScrolling:false beim Initialisieren des Plugins.Auf diese Weise wischt das Mausrad nicht und auch die Berührungsereignisse nicht.

Wenn Sie das Mausrad scrollen lassen möchten (für Computer), aber die Berührungsereignisse (Touch-Geräte) deaktivieren möchten, würde ich Ihnen empfehlen, das Plugin für Touch-Geräte auf andere Weise zu initialisieren.Um dies zu tun, empfehle ich Ihnen zu tun so etwas in der Art.

Aktualisierung 2016:

Sie können die Optionen verwenden responsiveWidth oder responsiveHeight sowie die Klasse fp-auto-height-responsive.

Die Optionen deaktivieren die autoScrolling-Funktion für mobile Geräte unter den angegebenen Abmessungen.Beispiele finden Sie in der examples ordner der ganzen Seite.js oder online.

Sie können auch verwenden responsiveSlides und erzwingen Sie die Umwandlung horizontaler Folien in vertikale Abschnitte bei Responsive.Dies kann durch die Responsive Folien-Erweiterung.

Aktualisierung September 2014:

---

Eine Methode mit dem Namen $.fn.fullpage.setAllowScrolling kann auch mit dem gleichen Zweck verwendet werden.Es wird sowohl das Touch-Scrollen als auch das Scrollen mit der Maus deaktiviert.

Aktualisierung Juni 2014:

---

autoScrolling:false deaktiviert nur das vertikale Scrollen.Wenn Sie auch die horizontale deaktivieren möchten, gibt es derzeit keine Möglichkeit, dies zu tun.Sie müssten das Plugin ein wenig modifizieren.

Ganzseitige Innenseite.js ersetzt dies:

function removeTouchHandler() {
    if (isTablet) {
        $(document).off('touchstart MSPointerDown');
        $(document).off('touchmove MSPointerMove');
    }
}

Dafür:

$.fn.fullpage.removeTouchHandler = function (){ 
    if (isTablet) {
        $(document).off('touchstart MSPointerDown');
        $(document).off('touchmove MSPointerMove');
    }
};

Und dann, wenn Sie das Plugin initialisieren, rufen Sie diese öffentliche Funktion in der afterRender rückruf wie folgt:

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

Rufen Sie fullpage nicht zweimal auf.Fügen Sie einfach die afterRender funktion innerhalb Ihrer Initialisierung.

Answer 2

Die Setallowcroll-Funktion akzeptiert auch ein zweites Argument für Richtungen, sodass das folgende verwendet werden kann, um das linke / rechte Scroll / Swiping zu deaktivieren:

$. fn.fullpage.setallowscrolling (falsch, 'links, rechts');

Answer 3

Ab Juni 2017 funktionierte keine der vorherigen Methoden für mich.Der einfachste Weg, die Berührung effektiv zu deaktivieren, ist wie folgt.

In jquery.Ganze Seite.js finden Sie die Funktion 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();
    }
}

Wenn fullpage initialisiert wird, ruft es automatisch auf setAllowScrolling(true), Auslösen des else if(value) bedingung oben.Kommentieren Sie einfach den Anruf an addTouchHandler() um es vollständig zu deaktivieren oder eine Bedingung für den Aufruf hinzuzufügen, z. B

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

Bei dieser Methode funktionieren die Pfeile nach links und rechts beim Tippen weiterhin, sodass horizontale Folien weiterhin navigiert werden können.Es sollte beachtet werden, dass mit $.fn.fullpage.setAllowScrolling(false, 'left, right'); deaktiviert auch die Pfeile.