移動滾動不與fullpage.js和wow.js

我使用fullpage.js來創建我的網站，我試圖將wow.js和animate.css合併來創建一些很酷的動畫。在桌面上一切正常，但是當我將瀏覽器調整爲手機大小時，我無法滾動。我的頁面加載頂部的動畫，但我無法滾動，直到我調整到一個更大的視口。移動滾動不與fullpage.js和wow.js

我試過'scrollOverflow：true'的fullpage，但它不工作。

這是我的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：真正的' 關於全頁，但它不工作。

And ...你爲什麼要用它？它的目的無關，與你的問題......所以你應該把它關掉...

來源

2015-11-26 12:52:59 Alvaro

不夠公平。我只是在尋找爲什麼會發生這種情況，我不知道如何去調試它。 – mattyfew

您正在使用'哇'的事實不應該爲移動設備上的fullpage.js造成任何問題。嘗試網站沒有哇，並測試它是否正常工作。如果沒有，那麼你正在做一個非常錯誤的fullPage.js。 – Alvaro

我想通了這個問題....

我有我的兩個html和身體overflow: hidden !important我的CSS。把它們拿走了，現在他們都工作了。

感謝您的幫助Alvaro！

來源

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" />

，並在結束BODY標籤我有所有這些腳本之前底部。

<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

回答

相關問題