1

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

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).

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

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

Andreas Richter
  • 738
  • 6
  • 20

1 Answers1

1

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

Andreas Richter
  • 738
  • 6
  • 20