在全屏滚动页面下实现鼠标滚轮的子级交互

需求分析

刚进公司产品提出一个需求：在全屏页面中滚动鼠标滚轮更新文本，回滚再恢复原文本，同时不影响全屏页面的正常切换：

• 初始状态

• 向下滚动鼠标后出现新文本

看似一个非常简单的需求，但因为这是一个使用了fullPage.js的全屏滚动页面，默认情况下滚动鼠标滚轮整个全屏页面也会随之滚动，因此解决起来还是费了一番功夫。

---

解决思路

引入jQuery 鼠标滚轮插件 mousewheel

因为Firefox在鼠标滚轮滚动事件上使用的API是DOMMouseScroll而非其他主流浏览器使用的onmousewheel，因此首先引入一个jQuery插件mousewheel以添加跨浏览器鼠标滚动事件的支持。

原始思路

一开始想到的方法是：当页面滚动到某一个页面时，先屏蔽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;
          }