ios下使用overflow scroll狀況下，到達最極端的狀況時會拖動整個頁面的解決辦法

今天開發ipad webapp時，遇到個問題就是在支持內部滾動（overflow:scroll）的頁面中，在滾到到最極端（最上或者最下時），會拖動整個頁面，帶來很差的用戶體驗。

方法一，從網上找到的：

function preventOverScroll(scrollPane) {
// See http://www.quirksmode.org/js/events_order.html
var CAPTURE_PHASE = true; // happens first, outside to inside
var BUBBLE_PHASE = false; // happens second, inside to outside

// These variables will be captured by the closures below
var allowScrollUp = true, allowScrollDown = true, lastY = 0;

scrollPane.addEventListener
(‘touchstart’,
function (e) {

// See http://www.w3.org/TR/cssom-view/#dom-element-scrolltop
allowScrollUp = (this.scrollTop > 0);
allowScrollDown = (this.scrollTop < this.scrollHeight – this.clientHeight);

// Remember where the touch started
lastY = e.pageY;
},
CAPTURE_PHASE);

// If the touch is on the scroll pane, don’t let it get to the
// body object which will cancel it
scrollPane.addEventListener
(‘touchmove’,
function (e) {
var up = (event.pageY > lastY);
var down = !up;
lastY = event.pageY;

// Trying to start past scroller bounds
if ((up && allowScrollUp) || (down && allowScrollDown)) {
// Stop this event from propagating, lest
// another object cancel it.
e.stopPropagation();
} else {
// Cancel this event
event.preventDefault();
}
},
CAPTURE_PHASE);
}

方法二本身想出來的，由於我發現非最極端（非最上或者最下時）時，就不會拖動整個頁面，那麼問題就簡單了：

　　　　　　　scrollPane.addEventListener('touchstart', function(){
                if(this.scrollTop === 0){
                    //滾動到1
                    this.scrollTop =1;
                }else if(this.scrollTop == this.scrollHeight - this.clientHeight){
                    //滾動到最低端-1
                    this.scrollTop =this.scrollHeight - this.clientHeight -1;
                } 
            }, true);