移动滚动不与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

回答

相关问题