fullPage.js和Wow.js不兼容的问题（已解决，方法待优化）

问题描述

我在PC端项目里同时使用了fullPage.js和wow.js。两个组件的基准冲突了。

原因就是fullPage.js是通过对外容器dowebok的y坐标进行偏移从而进行一屏滚动的，变化的是transitionY的值，如果一屏显示的高度要高于屏幕的高度，fullPage有个附带的slimscroll组件，专门用来控制超出屏幕高度的一屏的滚动，当然滚动控制的方式也是transitionY。

wow.js是一个基于animation.css的组件，它控制动出现、延迟、持续的时间的凭证，都是根据元素的offsetTop，来判断元素现在是否出现在界面上。

这就导致两个组件冲突，因为监控和修改的基准值不同，这个问题网上还是有几种解决方法的【但是都差不多】，我自己也思考了一下，下面是我觉得大概可行的几种方法：

1. 取消dowebok的默认属性，调出浏览器的默认滚动条
   方法详述： 网上最认可的一种方法，就是在dowebok的配置中，加上scrollBar:true，可以将浏览器的默认滚动条调出，通过浏览器的默认滚动条，可以实现改变页面的offsetTop的值，从而实现和wow.js一起搭配使用。需要在fullPage的渲染回调afterRender中新建wow对象
   问题：

   • 页面多出浏览器默认导航条会导致一屏不美观，需要手动去除
     ::-webkit-scrollbar { width: 0 !important } //样式代码
   • 默认滚动条会导致页面滚动非常敏感，滚动时页面没有原先这么顺滑了。也许需要用修改dowebok的灵敏度。在页面跳转滚动时仍旧会监控滚轮事件，导致滚动起来效果不好。
   • 页面overflow的高度不会由slimscroll控制，向下滚动时还好，向上滚动时页面会根据锚点突然跳转滚动，是fullpage事件监控的原因吗？这个问题是最需要解决的一个。

2. 修改wow动画的凭证
   方法详述： 就是直接把wow动画开始的凭证值offsetTop修改为dowebok的transitionY。
   问题： 需要修改wow.js的源码，说起来容易，但是麻烦的要死，这种方法还是尽量不要尝试了。

3. 改用animation.css
   方法详述：不用wow了，因为animation.css是可以通过top以外的方式进行调控的，可以在dowebok跳转时，对跳转页面索引index进行监控，给页面中的元素添加animation类。
   问题：

   1. 每一个变化的元素都需要手动添加一个display:none的类，好麻烦。
   2. 需要对每一个dowebok的afterLoad和onLeave进行定制，需要重复修改很多代码，而且类名还不好定位。
   3. 一屏section还好说，超出一屏的页面不止得用index控制动画类，还需要监控更多变量来预测元素出现的时机，好麻烦。

4. 不要用fullPage和wow了，用点其他的组件吧，不要吊死在一棵树上。

总结：虽然我的页面问题还没解决，但是我觉得方法1最可靠，就是没法解决scrollOverflow时的问题，当section超出屏幕100%大小时，方法1仍旧很难适用。

后续：最终我还是选择手动添加animation的方法，虽然要写一大堆延时调控，但是如果用wow的话好像也差不多，这种方法可谓是朴实无华而有效，但可以的话，还是尝试一下fullPage以外的全屏滚动组件吧，这个组件的问题真的还蛮多的。

后续的后续：

项目需求详述 ：本项目的要求是一屏滚动，每一页的最后一屏是超出屏幕高度需要scrollOverflow的，其他的页面都是贴合全屏，所以为了考虑overflow屏幕的动画，不能使用方法1。打开页面首次滚动到一屏时会加载动画，但是再次回到该屏时动画不再显示，所以单纯的加animation.css样式也不行。
最终解决方法：
将wow和animation混合使用。
有三个需要注意的地方：

• 需要在全屏的fullpage配置中对afterLoad和onLeave函数进行配置。
  afterLoad：在一屏完整滚动到一个页面时会调用的回调函数。
  onLeave：一屏即将滚动时会调用的回调函数。
  在afterLoad到一个页面的时候，需要给这个页面需要动画的元素添加类animated和动画类（我使用的主要是fadeInUp，所以接下来就用fadeInUp来表示动画类）。

function fadeInUp_Load(index, slideIndex, containName) {
  if (index == slideIndex) { //进入一屏延时添加动画
    $(containName + " .o-hidden").addClass("o-show animated fadeInUp");
    setTimeout(function () {
    /*
		如果一屏中有元素除了上浮特效还有其他特效，
		比如slideBox或者superSlide轮播等等
		注意延时等待上浮动画创建好之后对动画类进行清除，
		否则元素只要进行加载就会再把animated特效演示一遍
	*/
      $(containName + " .o-hidden").removeClass("animated fadeInUp");
    }, 600);   //延时时长一般是动画的duration
  }
}

function fadeInUp_Leave(index, slideIndex, containName) {
  if (index == slideIndex) { 
  /*
	如果只希望动画出现一次，即再次回到该section时不要再加动画，
	一种方法是在afterLoad函数中调用闭包函数加类，
	另一种方法就如下：在第一次转换出该模块的时候添加一个消除动画样式。
	.o-animation-none{
		animation-name:none !important;
	}	
  */
    setTimeout(function () {
      $(containName + " .o-hidden").addClass("o-animation-none");
    }, 200);
  }
}

• 在第一屏的时候，fullPage没法监听转换的load和leave事件，可以单独添加animated类来实现第一屏动画，也可以直接借用wow.js，因为在fullPage.js的插件中wow对第一屏的动画效果还在。
• 对于超出范围的一屏（一般是一页的最后一屏），fullPage会根据配置添加slimScrollBar， 这个插件非常难用，滚轮控制又不顺滑，还经常出现莫名其妙的震颤，还总搞不清它监控滚轮事件的延时。 对于这一部分，就需要给最顶端能完整显示给用户的部分使用load和leave的方式进行监控加类，对于必须要拉动滚动条向下才能看见的部分，需要同时监控wheel和slimScrollBar的mousemove事件，从而根据元素的offset().top来监视元素现在是否出现在屏幕上，代码如下：

function foot_scroll() {
  $(".foot-o-hidden").each(function () {   
    if ($(this).offset().top < window.innerHeight - 50) {  //阈值可以改动
      $(this).addClass("o-show animated fadeInUp");
      setTimeout(function () {
        $(this).addClass("o-animation-none");
      }, 600);
    }
  })
}

function fadeInUp_foot() {
  window.addEventListener("wheel", foot_scroll)
  setTimeout(function () {  //滚动条需要延时监控，否则捕捉不到
    $(".slimScrollBar").mousemove(foot_scroll)
  }, 1000)
}