iOS中带有position:sticky元素的可滚动iFrame [英] Scrollable iFrame with position:sticky element in iOS

问题描述

我想创建一个内部包含 position:sticky 元素的可滚动iFrame，该元素也可以在iOS上使用.

I want to create an scrollable iFrame with a position:sticky element inside, that also works on iOS.

iOS不尊重iFrames height:340px 的设置，替代方法仍使其滚动是带有 overflow-y:auto;-的容器divwebkit-overflow-scrolling:触摸； (请参阅 iframe滚动iOS 8 ).

iOS does not respect the iFrames height:340px setting, a workaround to still make it scrolling is a container div with overflow-y:auto;-webkit-overflow-scrolling: touch; (see Iframe scrolling iOS 8).

但是，当只有外部div滚动时， position:sticky 不起作用.还有其他解决方案可以使iFrame滚动显示吗?

But when only the outside div is scrolling the position:sticky is not working. Is there any other solution to making the iFrame scrollable?

在Web浏览器和iOS上查看此处: https://codepen.io/arichter83/project/full/ZWGEaL

See here on web browser vs. iOS: https://codepen.io/arichter83/project/full/ZWGEaL

推荐答案

好吧，我找到了解决方案-包装所有iFrame内容会使div容器过时:

Okay, I found the solution - wrapping all iFrame content makes the div container obsolete:

#wrap {
    position: fixed;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

https://github.com/PierBover/ios-iframe-fix

这篇关于iOS中带有position:sticky元素的可滚动iFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！