Отключить сенсорное пролистывание на fullpage.js

Question

Я использую плагин fullpage.js для одностраничного маркетингового сайта.

Я использую навигационные ссылки для перехода к сценам (всем по горизонтали) на сайте, поэтому я хочу отключить функцию касания/пролистывания (между сценами), поскольку она мешает работе других сенсорных элементов.

Я просмотрел всю документацию, но не могу понять, как этого добиться.

Любая помощь приветствуется.Спасибо, Джек.

Answer 1

Просто используйте опцию autoScrolling:false при инициализации плагина.Таким образом, колесо мыши не будет прокручиваться, как и события касания.

Если вы хотите сохранить прокрутку колеса мыши (для компьютеров), но отключить события касания (сенсорные устройства), я бы рекомендовал вам инициализировать плагин другим способом для сенсорных устройств.Для этого я рекомендую вам сделать что-то вроде этого.

Обновление 2016 года:

Вы можете использовать варианты responsiveWidth или responsiveHeight а также класс fp-auto-height-responsive.

Эти параметры отключат функцию автопрокрутки для мобильных устройств с указанными размерами.Примеры доступны в examples папка fullPage.js или В сети.

Вы также можете использовать responsiveSlides и принудительно преобразовать горизонтальные слайды в вертикальные разделы в адаптивном режиме.Это можно сделать через Расширение «Адаптивные слайды».

Обновление, сентябрь 2014 г.:

---

Метод с именем $.fn.fullpage.setAllowScrolling также можно использовать с этой же целью.Это отключит как сенсорную прокрутку, так и прокрутку мыши.

Обновление, июнь 2014 г.:

---

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, 'влево, право');

Answer 3

По состоянию на июнь 2017 года ни один из предыдущих методов не работал для меня.Самый простой способ, которым я обнаружил, чтобы эффективно отключить прикосновение, заключается в следующем.

в 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'); также отключит стрелки.