多个iframe在ipad中滚动问题

u010538414 2013-05-03 02:37:27

下面是代码，iframe在ipad中可以滚动，但是当你滚动一个时其余的两个也跟着一起滚动。怎样才能一个一个的滚动，对其余的没影响呢？
请问各位大神该怎么解决



var toScrollFrame = function(iFrame, mask){   

    var mouseY = 0;   

    var mouseX = 0;   

    

    $(iFrame).ready(function(){

		for(i=0;i<=2;i++){

        	$(iFrame).contents()[i].body.addEventListener('touchstart', function(e){   

            	mouseY = e.targetTouches[0].pageY;   

            	mouseX = e.targetTouches[0].pageX; 

        	});

        	$(iFrame).contents()[i].body.addEventListener('touchmove', function(e){   

            	e.preventDefault();   

            	var box = $(mask);   

            	box.scrollLeft(box.scrollLeft()+mouseX-e.targetTouches[0].pageX);   

            	box.scrollTop(box.scrollTop()+mouseY-e.targetTouches[0].pageY);   

        	});

		}

    });  

    

};



<style>

.myMask{ 

width: 100%; 

height: 230px;

overflow:hidden;

} 

.myFrame{ 

width: 100%; 

height: 228px;

} 

</style>

<body onload="toScrollFrame('.myFrame','.myMask')">

      <div class="myMask">

        <iframe id="iframe1" class="myFrame" src="dataTable.html" width="98%" height="228px"></iframe>

      </div>



      <div class="myMask">

        <iframe id="iframe2" class="myFrame" src="dataTable.html" width="98%" height="228px"></iframe>

      </div>



      <div class="myMask">

        <iframe id="iframe3" class="myFrame" src="dataTable.html" width="98%" height="228px"></iframe>

      </div>

</body>