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);