gpt4 book ai didi

ios - iframe 阻止 iScroll 在移动 Safari 上滚动

转载 作者:技术小花猫 更新时间:2023-10-29 10:49:44 25 4
gpt4 key购买 nike

我在我的移动网站上使用 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.

所以,我想:

"Ok, while the user scrolls, I need pointer-events:none. If he is not scrolling (and instead clicking), I must set pointer-events:auto in order to let the click/touch events pass."

所以我这样做了:

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 内的链接不起作用。

不起作用。有什么想法吗?

最佳答案

我找到了完美的解决方案。在 iOS 和 Android 上运行良好。

基本思想是在 iframe 之上放置一个 div 层。这种滚动方式可以顺利进行。

如果用户想要点击/单击该 iframe 上的元素,我只需在图层上捕获该点击,保存 x 和 y 坐标并在这些坐标处触发 iframe 内容上的点击事件:

HTML:

<div id="wrapper">
<div id="layer"></div>
<iframe id="theIframe"></iframe>
</div>
Other stuff

CSS:

#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);
});

关于ios - iframe 阻止 iScroll 在移动 Safari 上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15248970/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com