当我在离子含量中使用iframe时,离子内容滚动不起作用

问题描述 投票:5回答:4
<ion-view view-title="title">
  <ion-content scroll="true">
    <iframe src="{{link}}"></iframe>
  </ion-content>
</ion-view>

看看上面的代码。

正如标题所说,当我在离子内容中使用iframe时,滚动不起作用。

如何解决这个问题呢。

javascript html css3 iframe ionic
4个回答
14
投票

使用overflow-scroll启用滚动

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

1
投票

这是ios上的一个错误。我已经解决了这个问题。请参阅以下内容

Iframe scrolling iOS 8


0
投票

将以下css添加到iframe的父div

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

例:

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;
    }
}

-6
投票
<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>

它将工作滚动选项是默认的true.no需要专门添加

© www.soinside.com 2019 - 2024. All rights reserved.