mobile safari 下overflow:auto的解决方法

这次有个项目需要完全支持ipad，中间还是遇到了不少的问题。今天有个div需要滚动条在ipad的safari下面失效，mobile safari因为多点触摸的缘故取消了局部区域的滚动条（为了防止和默认的拖动行为冲突）。首先排除了是不是本身布局问题造成的，为此建了一个简单的页面进行测试依然失效，google发现还真是有这样的问题，google reader上也是失效的，mobile safari为此需要使用两个手指才能完成滚动局部的行为。

为了解决这样的问题继续google，最后发现了上述的一篇文章，使用mobile safari的touchmove事件模拟滚动条的效果。废话不多说代码如下：

function isTouchDevice(){

try{

document.createEvent("TouchEvent");

return true;

}catch(e){

return false;

}

}

function touchScroll(id){

if(isTouchDevice()){ //if touch events exist...

var el=document.getElementById(id);

var scrollStartPos=0;

 

document.getElementById(id).addEventListener("touchstart", function(event) {

scrollStartPos=this.scrollTop+event.touches[0].pageY;

event.preventDefault();

},false);

 

document.getElementById(id).addEventListener("touchmove", function(event) {

this.scrollTop=scrollStartPos-event.touches[0].pageY;

event.preventDefault();

},false);

}

}

最后使用

touchScroll("MyElement"); 将你需要overflow:auto的元素id调用这个方法即可。