4

我正在将iframe-resizer用于跨域应用程序,Iframe 在桌面和安卓设备中加载良好,但在我的 Iphone 上,我面临以下问题:

当我在页面上滚动时,Iframe 应用程序上的引导模式弹出窗口隐藏并闪烁。我试过了

-webkit-溢出滚动:触摸;

在 Iframe 的容器上,但这不起作用。

任何帮助/建议将不胜感激。

4

1 回答 1

2

我们通过使用position:absolute而不是position:fixed解决了这个问题

位置固定和绝对在行为上有些相似。两者都在视口中使用 x,y 定位,并且都在 DOM 文档流之外,因此其他内容不受容器放置的影响。两者都需要 zIndex 定位来确定视图堆栈中的垂直优先级。

无论浏览器的滚动位置如何,固定位置都会将元素固定在您设置的任何位置。这在您实际上想要滚动整个页面但将内容保留在适当位置的某些情况下是有意义的。要记住的关键是当您在页面上构建自己的可滚动内容时不要使用它。

事实证明,在我的情况下,我真的不需要 position:fixed 因为我自己管理容器和工具栏页眉和页脚的位置和大小。我知道所有东西的位置,并将内容区域有效地嵌入静态大小的元素中间。通过 CSS 和媒体查询,我可以使用固定大小将页眉强制放在顶部,将页脚放在底部,这意味着我可以安全地使用 position:absolute。

于 2019-09-05T10:30:55.500 回答