为了解决这样的问题继续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调用这个方法即可。
原文: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();