CODEWITHSUNDEEP
htmliosiframescroll
Xelun
Xelun

Reputation: 31

Scroll element behind an iframe with pointer events: none doesn't work on ios

I have an scrolleable div and on top of that (with position absolute) an iframe with pointer-events: none:

<div id="scrolleableDiv"> ... </div>

<div>
  <iframe src="..." scrolling="no"></iframe>
</div>

You can click on the div behind the iframe, but when you try to do a scroll, it works everywhere except on iOS (safari or chrome).

I tried to put the iframe on a div and use the parameter "-webkit-overflow-scrolling: touch;" on the div parent of the iframe, but still not working.

Here it is an example: https://codepen.io/miss_xelun/pen/KKowXpL

How can I make the scroll on the back div to work on iOS?

Upvotes: 0

Views: 1431

Answers (1)

Dicarva
Dicarva

Reputation: 75

Did you try this:

iframe {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}

See more here: https://davidwalsh.name/scroll-iframes-ios

Upvotes: 0

Related Questions