7
<ion-view view-title="title">
  <ion-content scroll="true">
    <iframe src="{{link}}"></iframe>
  </ion-content>
</ion-view>

look at the code above.

as the title says,when I use a iframe in the ion-content the scroll does't work.

How to solve this problem.

Gabriel Diez
  • 1,648
  • 2
  • 17
  • 26
Aaron
  • 167
  • 1
  • 2
  • 9

4 Answers4

16

Use overflow-scroll to enable scrolling 

<ion-view view-title="title">
    <ion-content overflow-scroll="true">
         <iframe src="{{link}}"></iframe>
    </ion-content>
</ion-view>
CRABOLO
  • 8,605
  • 39
  • 41
  • 68
iDeekshith
  • 433
  • 3
  • 9
3

It's a bug on ios. I have resolved this problem. Refer to the following

Iframe scrolling iOS 8

Community
  • 1
  • 1
Aaron
  • 167
  • 1
  • 2
  • 9
1

Add the following css to the parent div of iframe

-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;

Exmaple:

HTML

<ion-content class="iframe-fix">
  <iframe [src]="pageUrl" frameborder="0"></iframe>
</ion-content>

SCSS

.platform-ios{
    .iframe-fix{
      -webkit-overflow-scrolling: touch !important;
      overflow: scroll !important;
    }
}
Lasithds
  • 2,161
  • 25
  • 39
-7
<ion-view title="sample page">
 <ion-content>
 <iframe src="http://www.w3schools.com">
       <p>Your browser does not support iframes.</p>
</iframe>
</ion-content>
<ion-view>

it will work scroll option is default true.no need to add specifically

Naresh Kumar
  • 276
  • 2
  • 10
  • thank you for your answer. but the problem is not caused by browser does not support iframe. The page iframe loaded can be dispalyed. – Aaron Feb 02 '15 at 13:27
  • tag is just sample tex to show in iframe it will work fine.i have done so i posted here.if you use iframe in ion-content it works . – Naresh Kumar Feb 03 '15 at 05:25