Отключить fullpage.js на мобильных (сенсорных) устройствах

Я использую fullpage.js и slimscroll.плагин js, который необходим для прокрутки в разделе, который имеет контент, превышающий высоту его контейнерного раздела.

Я заметил, что опыт довольно плох на сенсорных устройствах. В то время как обычно вы можете прокручивать, отпускать и смотреть, как страница все еще прокручивается, на slimscroll div, как только ваш палец покидает область касания, прокрутка останавливается.

Итак, что я хотел бы сделать, это отключить fullpage.js на мобильных телефонах и таблетки, но все еще включают его на настольных компьютерах. Я проверил fullPage.проблемы и документация js, но я не мог найти простой способ сделать это.

кто-нибудь может мне помочь?

Спасибо большое

7
fullpage.js jquery slimscroll

4 ответов

просто не инициализируйте fullpage на сенсорных устройствах. Вам придется иметь дело с обнаружением мобильных/сенсорных устройств. Просто поиск на Гугле или даже здесь найти различных альтернатив.

это должно выглядеть так:

var isPhoneDevice = [ WHATEVER FUNCTION YOU WANT TO USE ]

//if it is not a phone device...
if(!isPhoneDevice){
    //initializing fullpage...
    $.fn.fullpage();
}

обновление

на данный момент fullpage.js предоставляет другую альтернативу. С помощью responsiveWidth и responsiveHeight параметры. Таким образом fullpage.js будет действовать как обычный веб-сайт при заданных значениях (в px).

это может также сочетается с классом fp-auto-height-responsive для того, чтобы предотвратить fullPage.js, чтобы установить высоту разделов на отзывчивый и позволить вам полный контроль над ними.

больше в документах.

5

Я использую этот способ! 

var isPhoneDevice = "ontouchstart" in document.documentElement; 
$(document).ready(function() {
        if(isPhoneDevice){
            //mobile
        }
            else{
                //desktop               
                $.fn.fullpage();
            }
        });
7

еще проще, что я наткнулся здесь, на Stackexchange - это то, что я использую:

if(screen.width < 480) { 
// do any 480 width stuff here, or simply do nothing
return;
} else {
// do all your cool stuff here for larger screens
}
3

адаптивные возможности дизайна были добавлены к fullPage.js с момента последнего ответа. Вы можете увидеть пример следующим ссылке.

читать про responsiveWidth и responsiveHeight на документация для сведения.

0