加载更多 - 监听整屏页面的滑动手势

前言：在需要加载更多的情况下，除了点击按钮加载更多外，还有用户体验更好的滑动加载，在用户无感知的情况下进行更多的内容展示。

思路：监听页面的滑动，当页面是向下滑动的情况下，比较滑动前后滚动条的位置差，位置差/设备高度= 用户滑过几页 ，再进行滑过几页后的更多内容的请求及展示。

代码如下：

function scoll(){    
    var mybody = document.getElementsByTagName('body')[0]; 
    var h = document.documentElement.clientHeight;
    mybody.style.height = h + 'px';

    //滑动处理        
    var startX, startY, moveEndX, moveEndY, X, Y;           
    mybody.addEventListener('touchstart', function(e) {    
        e.preventDefault();        
        startX = e.touches[0].pageX;        
        startY = e.touches[0].pageY;        
    }, false);        
    mybody.addEventListener('touchmove', function(e) {                    
        e.preventDefault();        
        moveEndX = e.changedTouches[0].pageX;        
        moveEndY = e.changedTouches[0].pageY;        
        X = moveEndX - startX;        
        Y = moveEndY - startY;                                
        if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {        
//                    console.log("向右");        
        }else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {        
//                    console.log("向左");        
        }else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {        
//                    console.log("向下");        
        }else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
//                        console.log("向上");        
            var scrollEnd=getPos();
            var clientHeight=document.documentElement.clientHeight;
            var differ=parseInt(scrollEnd-scrollStart);
//                        console.log("变化",differ)
//                        console.log("设备高",clientHeight)
            if(differ > clientHeight*6){    
                if (ipageIndex < totalPage) { //没到总页数
                    scrollStart=getPos();
                    moreList();
//                    alert("more")
                }
            }
        }else{        
            console.log("没滑动");        
        }        
    });
};    

获取当前滚动条位置

function getPos(){  //获取当前滚动条位置
    var scrollPos;    
    if (typeof window.pageYOffset != 'undefined') {
       scrollPos = window.pageYOffset;
    }else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
       scrollPos = document.documentElement.scrollTop;
    }else if (typeof document.body != 'undefined') {
       scrollPos = document.body.scrollTop;
    }
    return scrollPos;
}