Iframe Scrollen iOS 8

Habe ich ein iframe, und ich brauche es, um ein scrolling overflow. es scheint, funktionieren im desktop habe ich eine Arbeit, um zu machen es funktioniert in iOS. es funktioniert auf android und iOS jetzt. jedoch, iOS8, versagt er.

    <html>
    <body>
    <style type="text/css">
      .scroll-container {
       overflow: scroll;
       -webkit-overflow-scrolling: touch;
      }
     #iframe_survey {
      height: 100%;
     }

    .scroll-container {
     height: 100%;
     width: 100%;
     overflow: scroll;
     }
   </style>

   <div class="scroll-container scroll-ios">
   <iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
   </div>
   </body>

InformationsquelleAutor der Frage Adrian Mojica | 2014-09-25

Verwenden Sie den code in dieser Art und Weise

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
    <iframe style="width:100%;height:600px" src="www.iframe.com"></iframe>
</div>

InformationsquelleAutor der Antwort Usman Khawaja

26

Um einen iframe Scrollbar auf iOS, müssen Sie die CSS3-Eigenschaft -webkit-overflow-scrolling: touch zum übergeordneten container:
```
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
  <iframe src="./yxz" style="width:100%;height:100%">
</div>
```
InformationsquelleAutor der Antwort gem007bd
5

Habe ich endlich mine arbeiten nach vielen Stunden und Tests. Im Grunde, was für mich gearbeitet wurde das (dargestellt als inline-styling für die demo).
Machen Sie den äußeren div-overflow auto hält es angezeigt, einen zusätzlichen Satz der Bildlaufleisten auf desktops.
```
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;"> 
   <iframe src="http://www.mywebsiteurl.com" style="width: 100%; height: 600px; display: block; overflow: scroll; -webkit-overflow-scrolling: touch;" ></iframe>
</div>
```
InformationsquelleAutor der Antwort Robin B
3

es funktionierte nicht für mich! aber ich konnte herausfinden, einen kleinen trick: nach der Lektüre dieses post:
https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/

Gerade ein !wichtig ist, nach, dass und funktioniert Prima!
```
-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
```
InformationsquelleAutor der Antwort Renato Dantas
2

Gibt es einen bug in iOS 8, das bricht, das scrollen alle zusammen, wenn -webkit-overflow-scrolling:touch angewendet wurde, um alles, was überströmt.

Haben Sie einen Blick auf die Ausgabe, die ich gepostet vor ein paar Wochen:
-webkit-overflow-scrolling: touch; bricht in Apple iOS8

InformationsquelleAutor der Antwort Jamie Beech

Den muss definieren, die Ihre scroll-container zu fixed für die div ist eine fullscreen-Größe. Dann innerhalb der iframe erstellen Sie eine Haupt-Inhalt, die Eigenschaften scrollen.

Inneren iframe, in der mainContainer-scrolldie Sie hinzufügen können:

-webkit-overflow-scrolling: touch //Für aktive glatten Blättern
-webkit-transform: translate3d(0, 0, 0) //Für die materielle Beschleunigung
overflow-y:scroll; //Für hinzufügen-scrolling in y Achse
position:absolute;height:100%;width:100%;top:0;left:0; //Fix für die container

Hauptseite

<html>
    <head>
        <style type="text/css">
            #iframe_survey {
                height: 100%;
            }

            .scroll-container {
                height: 100%;
                width: 100%;
                position:fixed;
            }
        </style>
    </head>
    <body>
        <div class="scroll-container scroll-ios">
            <iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
        </div>
    </body>
</html>

Inside Iframe

<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;top:0;left:0;-webkit-overflow-scrolling: touch;-webkit-transform: translate3d(0, 0, 0);overflow-y:scroll;">
    <div class="Content" style="height:2000px;width:100%;background:blue;">
    </div>
</div>

InformationsquelleAutor der Antwort P. Frank

1

Fand ich, dass die Updates 1 und 2 funktionieren auf iOS 11, aber ich fand auch, dass im laden eine responsive Seite in den iframe overflow-x: hidden; war auch notwendig, um den iframe von der Bewegung nach Links und rechts scrollen y versucht. Nur zur info.

InformationsquelleAutor der Antwort Joe Williams
0

Nicht zu wissen, was am anderen Ende "www.iframe.com"...aber für mich, in dieser Datei ist die css-fügte ich hinzu:
```
body {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}
```
Dass es behoben.

InformationsquelleAutor der Antwort deep rock

Verwenden Sie die auf-Körper-Stil oder
overflow:scroll;

Oder

<div style="width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="overflow:scroll;" src="www.iframe.com"></iframe>
</div>

InformationsquelleAutor der Antwort Lokesh Kumawat

0

War ich in der Lage, einen iframe scrollen in iOS durch die Erteilung einer iframe innerhalb einer div (fungiert als container) und übernehmen Sie die Formatvorlagen wie folgt und das funktioniert perfekt.
```
.iframe {
    overflow: scroll !important;
    width: 100%;
    height: 100%;
    border: none;
}

.div {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #FFF;
}
```
Als ich arbeite in GWT, GWT Leute hier ist der Vorschlag.
Im Fall von GWT nur in einem iframe in ScrollPanel (div) und die Stile angewendet wie oben.

InformationsquelleAutor der Antwort Manne Teja

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.