Отключить сенсорное пролистывание на fullpage.js
-
21-12-2019 - |
Вопрос
Я использую плагин fullpage.js для одностраничного маркетингового сайта.
Я использую навигационные ссылки для перехода к сценам (всем по горизонтали) на сайте, поэтому я хочу отключить функцию касания/пролистывания (между сценами), поскольку она мешает работе других сенсорных элементов.
Я просмотрел всю документацию, но не могу понять, как этого добиться.
Любая помощь приветствуется.Спасибо, Джек.
Решение
Просто используйте опцию 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
функция внутри вашей инициализации.
Другие советы
Функция setallowscrolling также принимает второй аргумент для направлений, поэтому можно использовать для отключения левой / правой прокрутки / прокрутки:
$. fn.fullpage.setallowscrolling (false, 'влево, право');
По состоянию на июнь 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');
также отключит стрелки.