iframe防止iScroll在移动Safari上滚动
我在我的移动启用网站上使用iScroll (在这里使用iPhone )在div中滚动。
在这个div中，我有一个固定高度的iframe：
<body>
<div id="iscroller">
<iframe id="theIframe"></iframe>
Other stuff
</div>
</body>现在，当在div中滚动时，一切都按预期工作，但当开始于iframe时，我无法滚动。
这里很好地描述了这个问题：https://github.com/cubiq/iscroll/issues/41
因此，通过将pointer-events:none应用到iframe，我使用了css解决方案。
现在，滚动完全可以使用，但是我不能单击在iframe中定义的任何链接，因为在iframe上的所有单击/触摸事件似乎都由于pointer-events: none而被阻塞。
所以，我想：
“好的，当用户滚动时，我需要
pointer-events:none。如果他没有滚动(而不是点击)，我必须设置pointer-events:auto以便让单击/触摸事件通过。”
所以我做了这个：
CSS
#theIframe{pointer-events:none}JavaScript
$("#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");
});不管我做什么:要么滚动不起作用，要么点击iframe内的链接不起作用。
不起作用。有什么想法吗？
回答 2
Stack Overflow用户
发布于 2013-03-18 11:10:18
我找到了完美的解决方案。在iOS和安卓系统上工作得很好。
其基本思想是将div层放在iframe的顶部。这样滚动就可以顺利地工作了。
如果用户想点击/单击该iframe上的一个元素，我只需捕捉到该层的单击，保存x和y坐标，并在这些坐标处触发iframe内容上的click事件：
HTML:
<div id="wrapper">
<div id="layer"></div>
<iframe id="theIframe"></iframe>
</div>
Other stuffCSS:
#layer{
position:absolute;
opacity:0;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
z-index:2
}JavaScript:
$('#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);
});Stack Overflow用户
发布于 2013-11-08 16:34:18
我找到了解决这个问题的方法，它恰好接近了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);
};
};谢谢你找我！
https://stackoverflow.com/questions/15248970
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号