移動端網頁下拉刷新

一、采用觸摸事件touchmove。

1、定義公共變量

var timer = null; 

var startY, moveY, initTop, oldTop, newTop;

2、添加事件

$('#container ul').on('touchstart', function(e){

    startY = e.originalEvent.touches[0].pageY;

    initTop = 0;

});

$('#container ul').on('touchmove', function(e){

    moveY = e.originalEvent.touches[0].pageY;

    scrollEnd();

});

3、定時觸發方法

function scrollEnd(){

    if(timer) clearTimeout(timer);

    newTop = $(window).scrollTop();

    if(newTop === oldTop) {

        clearTimeout(timer);

if(initTop != newTop){

    var wHeight = $(window).height();

    var dHeight = $(document).height();

    if((newTop > 0) && (newTop + wHeight >= dHeight) && (startY - moveY > 0)){

        //執行業務代碼

    }

}

    } else{

        oldTop = newTop;

        timer = setTimeout(scrollEnd,100);

    }

}

二、采用scroll事件

$(window).scroll(function(){

    var scrollTop = $(this).scrollTop();//滾動條距離Y軸的高度

    var documentHeight = $(document).height();//整個窗口的高度

    var height = $(this).height();//可視區域的高度

    if((scrollTop + height) == documentHeight){

        //執行業務代碼

    }

});