移动端 ios Safari 问题及 一般解决方法

在ios设备中 使用 overflow 会有卡顿，解决办法：-webkit-overflow-scrolling: touch;  /*消除在ios设备卡顿*/

在ios中的click事件不执行：解决办法：①：将目标元素 改为<a>或者<button>，②：给目标元素设置 cursor:pointer; ③：click事件 写为tounched事件

转： 在ios中 

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