87,991
社区成员
发帖
与我相关
我的任务
分享多个iframe在ipad中滚动问题
下面是代码，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>
...全文
请发表友善的回复…
发表回复
