мобильный прокрутка не работает с fullpage.js и wow.js

Я использую fullpage.js для создания своего сайта, и я пытаюсь включить wow.js и animate.css, чтобы создать классную анимацию. Все работает нормально на рабочем столе, но когда я изменяю размер браузера на мобильный, я не могу прокручивать его вообще. Анимация в верхней части загрузки моей страницы, но я не могу прокручивать ее до тех пор, пока не изменю размер изображения в более крупном окне просмотра.мобильный прокрутка не работает с fullpage.js и wow.js

Я пробовал «scrollOverflow: true» на полной странице, но он не работает.

Это то, что мой app.js выглядит следующим образом:

$(document).ready(function() { 

wow = new WOW(
    { 
     boxClass:  'wow',  // default 
     animateClass: 'animated', // default 
     offset:  0,   // default 
     mobile:  false,  
     live:   true  // default 
    } 
) 
wow.init(); 

$('#fullpage').fullpage({ 
    navigation: true, 
    navigationPosition: 'left', 
    navigationTooltips: ['Home', 'About Me', 'Skills', 'Portfolio', 'Contact', 'Hire Me'], 
    resize: false, 
    scrollBar: true, 
    scrollOverflow: false, 

    //RESPONSIVE 
    responsiveWidth: 800, 
    afterResize: function() { 
     if ($(window).width() < 800) { 
      //$.fn.fullpage.setAutoScrolling(false); 
      var verticalNav = document.getElementById("fp-nav"); 
      $(verticalNav).hide(); 
     } 
    } 
}); 
});

источник

2015-11-26 mattyfew

Я попытался 'scrollOverflow: истинно' на Всей странице, но это не работает.

И ... почему вы используете его? Цель этого не имеет ничего общего с вашей проблемой ... так что вы должны отключить его ...

источник

2015-11-26 12:52:59 Alvaro

Справедливо. Я просто ищу любую причину, почему это происходит, и я не уверен, как это сделать. – mattyfew

Тот факт, что вы используете 'wow', не должен допускать никаких проблем для fullpage.js на мобильных устройствах. Попробуйте сайт без вау и проверьте, работает ли он нормально. Если нет, то вы делаете что-то очень плохое с fullPage.js. – Alvaro

я понял, проблема ....

я имел overflow: hidden !important как на мой HTML и тела в мой CSS. Схватил их, и они оба работают сейчас.

Спасибо за помощь Альваро!

источник

2015-11-26 16:54:47 mattyfew

ОНИ РАБОТАЮТ

Я использую FullPage.js, scrollOverflow и WOW анимации в целом, и они работают прекрасно.

ЗДЕСЬ МОИ НАСТРОЙКИ

В ГОЛОВЫ ЭЛЕМЕНТ У меня есть эти ссылки

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

А на дне перед тегом заканчивающегося ТЕЛА У меня есть все эти сценарии.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/vendors/scrolloverflow.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.js"></script> 

<script> 
    /*** Call function after page has loaded ***/ 
    $(document).ready(function() { 

     /*** Call FullPage.js option ***/ 
     pageScroll(); 

     new WOW().init(); 
     $(window).resize(function() { 
      pageScroll(); 
     }); 
    }); 

    /*** FullPage.js Function ***/ 
    function pageScroll(){ 
     $('#fullpage').fullpage({ 
      sectionsColor: ['#06C', '#C06', '#930', '#06C'], 
      anchors: ['aa', 'bb', 'cc', 'dd'], 
      menu: '.menu', 
      navigation: true, 
      scrollOverflow: true, 
      scrollBar:true, 
      fixedElements: '.header', 
      paddingTop: '3em', 
      slidesNavigation: true, 
      paddingBottom: '1em' 
     }); 
    } 
</script>

Здесь находится действующий рабочий сайт.

https://cleansites.us/

источник

2017-03-31 08:16:37 lupoll88

мобильный прокрутка не работает с fullpage.js и wow.js

ответ

Смежные вопросы