Mobile Safari css overflow

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

为了解决这样的问题继续google，最后发现了上述的一篇文章，使用mobilesafari的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调用这个方法即可。

原文:http://www.189works.com/article-55837-1.html

后续开发中发现中间INPUT等DOM在滚动DIV中不能触发事件,修正方法:

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA'  && target.tagName != 'A')
        			event.preventDefault();