CODEWITHSUNDEEP
htmlionic-frameworkiframescroll
Ariel
Ariel

Reputation: 1527

Embedding Ionic in iFrame blocks parent scroll

So, I need to embed an Ionic webapp in a webiste (which I already did), the problem now is that when the iFrame gets to the end, the parent site (the one with the iframe tag) won't keep scrolling, only when mouse is outside iFrame area.

The iFrame scrolls, but the parent won't scroll if the mouse is over the iFrame area.

I've tried many things the past days:

I've put together a codepen with basic code:

It has some p elements and one iFrame in the middle of the elements, the frame is loading a basic Ionic webapp with only a list, this is the markup used inside Ionic page:

<ion-header>
  <ion-toolbar color="dark">
    <ion-title>
      Just 5 <strong>p</strong> tags
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
 <p *ngFor="let we of [1,2,3,4,5]" style="color: red;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis leo risus, eu mattis justo vestibulum eget. Nam pellentesque posuere dui vitae commodo. Integer nec mi tristique enim suscipit viverra. Aliquam erat volutpat. Curabitur tristique et quam non placerat. Mauris tincidunt ipsum augue, ac rhoncus velit condimentum in. Morbi non dictum ex, non tristique magna. Donec posuere, lorem nec porttitor varius, quam neque aliquet metus, imperdiet posuere nunc nulla sit amet mi. Nullam aliquam rhoncus nunc. Nulla sit amet placerat erat, in egestas mauris. Donec ut sagittis dui. Sed porttitor nisl sed cursus semper. Quisque nec viverra eros.

  Maecenas commodo lacus eget lorem placerat finibus. Nulla facilisi. Sed faucibus bibendum velit ullamcorper varius. Nulla euismod, orci vitae venenatis ornare, nisi leo euismod massa, pulvinar fermentum est sem eget sapien. Donec convallis nisi eu lacus ullamcorper consectetur in eu orci. Etiam vitae urna varius, lobortis diam eu, varius sem. Fusce volutpat tincidunt lorem ac egestas. Praesent feugiat nisl sed lacinia posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet metus libero. Proin metus odio, pretium porttitor vulputate vitae, auctor eget nibh. Duis ornare dolor enim, eu hendrerit diam ultrices ac. Maecenas consectetur scelerisque velit, ac suscipit eros lacinia et. Nam in sem tellus. Integer nec lorem ex. Maecenas id consequat neque, a rhoncus diam.
 </p>
 </ion-content>

And the embeding is done this way:

<div>
  <iframe src="https://parapruebas-f6412.firebaseapp.com/list" height="500" width="100%" frameborder="0" scrolling="yes"></iframe>
</div>

Here's the codepen with a demo of the problem: https://codepen.io/Scombr0/pen/QWWRPvY

The URL where the the Ionic webapp is hosted: https://parapruebas-f6412.firebaseapp.com/list in case you want to inspect it.

I've ran out of ideas and I think it has something to do with the way Ionic handles scroll events inside its IonContent component. Which I believe it's a Shadow DOM so I cannot change it's behavior.. i'm kinda lost here.

Thanks for your time!

Upvotes: 0

Views: 257

Answers (1)

Ryan
Ryan

Reputation: 11

This is a confirmed bug and has been fixed in subsequent versions: https://github.com/ionic-team/ionic-framework/issues/20010

I was having the same issue with the iFrame, you'll want to add "overscroll-behavior: revert" to the y-scroll class or upgrade Ionic.

y-scroll {
  overscroll-behavior: revert;
}

Upvotes: 1

Related Questions