需求分析
刚进公司产品提出一个需求：在全屏页面中滚动鼠标滚轮更新文本，回滚再恢复原文本，同时不影响全屏页面的正常切换：
初始状态
向下滚动鼠标后出现新文本
看似一个非常简单的需求，但因为这是一个使用了的全屏滚动页面，默认情况下滚动鼠标滚轮整个全屏页面也会随之滚动，因此解决起来还是费了一番功夫。
解决思路
引入jQuery 鼠标滚轮插件 mousewheel
因为Firefox在鼠标滚轮滚动事件上使用的API是DOMMouseScroll而非其他主流浏览器使用的onmousewheel，因此首先引入一个jQuery插件以添加跨浏览器鼠标滚动事件的支持。
原始思路
一开始想到的方法是：当页面滚动到某一个页面时，先屏蔽fullPage.js的默认滚动触发，即把setAllowScrolling设置为false；每次手指滚动鼠标滚轮，结合文本显示的具体状态和鼠标滚轮滚动的方向再更改setAllowScrolling的值恢复整个页面的滚动。例如，当页面滚动到如上图1所示的页面时，文本是默认文本，此时应实现向上滚动切换到上一页，向下滚动切换文字；当处于上图2所示的页面时，应实现向上滚动切回原文字，向下滚动切换到下一页。可以通过自定义变量isDefaultPara纪录每次滚动鼠标后，文本处于何种状态。这种思路逻辑上是行的通的，但是存在两个问题：一是没有一个API可以反映用户“滚动了一次滚轮”，通过mousewheel插件我们可以获取的数据仅仅只有滚动的方向及滚动角度大小；二是setAllowScrolling不能选择性地屏蔽某一方向的滚动而只能全面禁止页面滚动，因此无论如何都无法实现上述例子所要达到的效果。
改进思路
查阅fullPage.js的官方文档之后，发现该插件提供了一个moveTo(section, slide)的方法函数，通过这个方法可以手动将屏幕滚动到某个section或者slide。由此，我们可以完全屏蔽fullPage.js的默认滚动触发，改用moveTo方法控制全屏滚动，解除了全屏滚动与鼠标滚轮事件的强耦合。此外，通过定时器延时1秒设置isDefaultPara的值，将用户的鼠标滚轮操作强制分为两步，最终实现了目的。
具体代码
//在fullpage()方法中添加以下两个回调函数 afterRender: function(){ //页面载入后，禁止默认的鼠标滚轮滚动行为 $.fn.fullpage.setAllowScrolling(false); }, afterLoad: function(anchorLink, index){ //此处只写出滚动到第3屏的代码，其他屏同理 if (index == 3) { //判定默认文档显示状态并存入isDefaultPara变量 var isDefaultPara = $('.default-para').is(':visible'); $('.section').eq(2).mousewheel(function(event, delta, deltaX, deltaY){ switch (true) { case delta<0 && isDefaultPara: $('.default-para').hide().removeClass('bounceInRight'); $('.post-para').show().addClass('bounceInLeft'); //当文本出现的动画显示完全(1s后)才能进行下一步操作 setTimeout(function(){ defaultPara = false; },1000); break; case delta>0 && isDefaultPara: $.fn.fullpage.moveTo(2); break; case delta<0 && !isDefaultPara: $.fn.fullpage.moveTo(4); break; case delta>0 && !isDefaultPara: $('.post-para').hide().removeClass('bounceInLeft'); $('.default-para').show().addClass('bounceInRight'); setTimeout(function(){ firstPara = true; },1000); default: return false; }