兼容ie8的单屏滚动插件Scrollify修改。

项目要做一个类似小米商城那样滚一下鼠标，就滚动一面屏幕的效果，又要求兼容ie8，在网上搜了许多插件，都不好用，只有一个scrollify.js用着还不错。

但是这个插件有一个缺点，就是滚动鼠标滑轮一下就滚动一页，如果你滚了很大一圈，就滚了好几页，所以决定改一下源码，但是又不知道从何改起。

wheelHandler: function(e, t) {
                        e.preventDefault();
                        t = t || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120;
                        if (l) {
                            clearTimeout(l)
                        }
                        l = setTimeout(function() {
                            if (t < 0) {
                                if (u < i.length - 1) {
                                    u++
                                }
                            } else if (t > 0) {
                                if (u > 0) {
                                    u--
                                }
                            }
                            if (u >= 0) {
                                d(u)
                            } else {
                                u = 0
                            }
                        },
                        25)
            },

这段代码是滑动滚轮执行的代码，u代表的是当前应该滑到的页数，d(u)函数，很明显d函数就是控制页面滚动的函数了，于是发现，只要一滑动滑轮，这两个函数就在不停的运行，也就是说你滑一格就运行一页，滑两格就运行两页。

这个插件还有两个属性，滚动之前和滚动以后，所以我们可以定义一个变量，在滚动之前，值为false，滚动以后，值为true，然后在控制页面滚动的代码里判断，如果是false的话，说明页面还没有滚完，这时候在滚滑轮就不继续执行，如果是true，说明页面滚完了，滚完了就可以继续执行下一个页面了

所以代码改成这样

 wheelHandler: function(e, t) {
                if(fvk==true){
                        e.preventDefault();
                        t = t || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120;
                        if (l) {
                            clearTimeout(l)
                        }
                        l = setTimeout(function() {
                            if (t < 0) {
                                if (u < i.length - 1) {
                                    u++
                                    //u是页数
                                }
                            } else if (t > 0) {
                                if (u > 0) {
                                    u--
                                }
                            }
                            if (u >= 0) {
                                d(u)
                            } else {
                                u = 0
                            }
                        },
                        25)
                }
                
            },

 

在函数的一开始定义变量fvk,before:function(){}里，吧fvk设为false，after: function() {//在这里把fvk设为true}；

这几部完成以后，页面就可以大胆的滑动了，再也不用担心一不小心滑太远的问题。

 

这些问题都解决以后还有一个问题，就是在移动端如果颠倒设备改变屏幕尺寸的时候，这个插件会出错，至今找不到原因，但是刷新一下就好了，所以我的解决办法很简单粗暴，只要页面大小一改变，当前页面就刷新一遍

$(window).resize(function(){
　　window.location.reload();
})

这样简单粗暴的方法，特别适合我们这种一个人完成的小型项目。