Ios iframe防止在mobile Safari上滚动
我在我的移动启用网站（这里使用iPhone）上使用iScroll在div中滚动 在这个div中，我有一个固定高度的iframe，如下所示：Ios iframe防止在mobile Safari上滚动,ios,html,iframe,scroll,iscroll,Ios,Html,Iframe,Scroll,Iscroll,我在我的移动启用网站（这里使用iPhone）上使用iScroll在div中滚动 在这个div中，我有一个固定高度的iframe，如下所示： <body> <div id="iscroller"> <iframe id="theIframe"></iframe> Other stuff </div> </body> JavaScript $("#theIframe").bind("touchstart
<body>
<div id="iscroller">
<iframe id="theIframe"></iframe>
Other stuff
</div>
</body>
$("#theIframe").bind("touchstart", function(){
// Enable click before click is triggered
$(this).css("pointer-events", "auto");
});
$("#theIframe").bind("touchmove", function(){
// Disable click/touch events while scrolling
$(this).css("pointer-events", "none");
});
$("#theIframe").bind("touchend", function(){
// Re-enable click/touch events after releasing
$(this).css("pointer-events", "auto");
});
不起作用。有什么想法吗？我找到了完美的解决方案。在iOS和安卓系统上运行良好 其基本思想是在iframe上放置一个div层。这种方式滚动工作顺利 如果用户想要点击/单击该iframe上的元素，我只需捕捉该层上的点击，保存x和y坐标，并在这些坐标处触发iframe内容上的点击事件： HTML:
<div id="wrapper">
<div id="layer"></div>
<iframe id="theIframe"></iframe>
</div>
Other stuff
#layer{
position:absolute;
opacity:0;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
z-index:2
}
$('#layer').click(function(event){
var iframe = $('#theIframe').get(0);
var iframeDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
// Find click position (coordinates)
var x = event.offsetX;
var y = event.offsetY;
// Trigger click inside iframe
var link = iframeDoc.elementFromPoint(x, y);
var newEvent = iframeDoc.createEvent('HTMLEvents');
newEvent.initEvent('click', true, true);
link.dispatchEvent(newEvent);
});
<div id="wrapper">
<div id="layer"></div>
<iframe id="theIframe"></iframe>
</div>
Other stuff
#layer{
position:absolute;
opacity:0;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
z-index:2
}
$('#layer').click(function(event){
var iframe = $('#theIframe').get(0);
var iframeDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
// Find click position (coordinates)
var x = event.offsetX;
var y = event.offsetY;
// Trigger click inside iframe
var link = iframeDoc.elementFromPoint(x, y);
var newEvent = iframeDoc.createEvent('HTMLEvents');
newEvent.initEvent('click', true, true);
link.dispatchEvent(newEvent);
});
我找到了一个解决方案，它恰好与其他人在github上已经提到的非常接近，但是这对于任何想快速解决这个问题的人来说都是有用的 我假设只有一个iscroll容器，在这里表示为ID。这没有经过适当的测试，需要重构。它在我的项目中起作用，但我在这里稍微做了一些修改，作为示例，但我想你会很容易理解你需要做什么：
var $iscroll = $('#iscroll');
document.addEventListener('touchstart', function(e) {
if ($iscroll.find('iframe').length > 0){
$.each($iscroll.find('iframe'), function(k,v){
var $parent = $(v).parent().first();
if ($parent.find('.preventTouch').length == 0){
$('<div class="preventTouch" style="position:absolute; z-index:2; width:100%; height:100%;"></div>')
.prependTo($parent);
};
$parent
.css('position', 'relative').css('z-index', 1);
});
$iscroll.find('.preventTouch').on('click', function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
};
};
document.addEventListener('touchend', function(e) {
if ($iscroll.find('iframe').length > 0){
setTimeout(function(){
var $iscroll = $('#iscroll');
$iscroll.find('.preventTouch').remove();
$iscroll.find('iframe').css('z-index', '');
$iscroll.find('.preventTouch').off('click');
}, 400);
};
};
var$iscroll=$（'#iscroll'）；
document.addEventListener（'touchstart'，函数（e）{
if（$iscroll.find（'iframe'）。长度>0）{
$.each（$iscroll.find（'iframe'），函数（k，v）{
var$parent=$（v.parent（）.first（）；
if（$parent.find（'.preventTouch'）。长度==0）{
$('')
.prependTo（母公司）；
};
$parent
.css（'position'，'relative'）.css（'z-index'，1）；
});
$iscroll.find（'.preventTouch'）。on（'click'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
返回false；
});
};
};
文档.添加的EventListener（'touchend'，函数（e）{
if（$iscroll.find（'iframe'）。长度>0）{
setTimeout（函数（）{
var$iscroll=$（“#iscroll”）；
$iscroll.find（'.preventTouch'）.remove（）；
$iscroll.find（'iframe'）.css（'z-index'，''）；
$iscroll.find（'.preventTouch'）.off（'click'）；
}, 400);
};
};
感谢您的关注！没有其他方法可以做到这一点？这是一个聪明的方法，但我无法控制iframe，如果它确实改变了im螺钉，谢谢伙计：）@jycr753如果您的用户不需要单击iframe内的链接，您可以使用css属性
指针事件：无