Desative o deslizamento por toque em fullpage.js

Question

Estou usando o plugin fullpage.js para um site de marketing de página única.

Estou usando links de navegação para pular para cenas (todas horizontais) ao redor do site, então quero desabilitar o recurso de tocar/deslizar (entre cenas), pois ele interfere em outros elementos de toque.

Analisei toda a documentação, mas não consigo descobrir como fazer isso.

Qualquer ajuda é bem-vinda.Obrigado, Jack.

Answer 1

Basta usar a opção autoScrolling:false ao inicializar o plugin.Dessa forma, a roda do mouse não deslizará e nem os eventos de toque.

Se você quiser manter a rolagem da roda do mouse (para computadores), mas desativar os eventos de toque (dispositivos de toque), recomendo que você inicialize o plugin de uma maneira diferente para dispositivos de toque.Para fazer isso, recomendo que você faça algo assim.

Atualização 2016:

Você pode usar as opções responsiveWidth ou responsiveHeight assim como a aula fp-auto-height-responsive.

As opções desativarão o recurso de rolagem automática para dispositivos móveis nas dimensões especificadas.Exemplos disponíveis no examples pasta de fullPage.js ou on-line.

Você também pode usar responsiveSlides e forçar a transformação de slides horizontais em seções verticais no responsivo.Isto pode ser feito através do Extensão do Apresentações responsivas.

Atualização de setembro de 2014:

---

Um método chamado $.fn.fullpage.setAllowScrolling também pode ser usado com esse mesmo propósito.Isso desativará a rolagem por toque e a rolagem do mouse.

Atualização de junho de 2014:

---

autoScrolling:false desativa apenas a rolagem vertical.Se você quiser desativar também o horizontal, não há como fazer isso agora.Você precisaria modificar um pouco o plugin.

Dentro de fullpage.js substitui isto:

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

Por esta:

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

E então, ao inicializar o plugin, chame essa função pública no afterRender retorno de chamada assim:

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

Não ligue para fullpage duas vezes.Basta adicionar o afterRender função dentro de sua inicialização.

Answer 2

A função setallowscrolling também aceita um segundo argumento para as instruções, portanto, o seguinte pode ser usado para desativar a rolagem esquerda / direita / swiping:

$. fn.fullpage.setallowscrolling (falso, «esquerda, direita»);

Answer 3

Em junho de 2017, nenhum dos métodos anteriores funcionou para mim.A maneira mais simples que encontrei para desativar efetivamente o toque é a seguinte.

Em jquery.fullPage.js você encontrará a função 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();
    }
}

Quando fullpage é inicializado, ele chama automaticamente setAllowScrolling(true), acionando o else if(value) condição acima.Basta comentar a chamada para addTouchHandler() para desativá-lo totalmente ou adicionar algum tipo de condição para que ele seja chamado, por exemplo

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

Com este método, as setas esquerda e direita ainda funcionam quando tocadas, portanto, os slides horizontais ainda podem ser navegados.Deve-se notar que usando $.fn.fullpage.setAllowScrolling(false, 'left, right'); também desativará as setas.