web-dev-qa-db-fra.com

Iframe défilement iOS 8

J'ai un iframe et j'en ai besoin pour avoir un débordement de défilement. il semble fonctionner dans le bureau, j'ai utilisé un travail pour le faire fonctionner dans iOS. cela fonctionne sur Android et iOS maintenant. Cependant, iOS8 échoue.

    <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>
iframescrolloverflowios8
38
Adrian Mojica

Utilisez le code de cette façon

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

Pour faire défiler un iframe sur iOS, vous devez ajouter la propriété CSS3 -webkit-overflow-scrolling: touch au conteneur parent:

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
  <iframe src="./yxz" style="width:100%;height:100%">
</div>
34
gem007bd

Le mien a finalement fonctionné après de nombreuses heures et des tests. Fondamentalement, ce qui a fonctionné pour moi a été ceci (présenté comme un style en ligne pour une démonstration). L'activation automatique du débordement de la division externe l'empêche d'afficher un ensemble supplémentaire de barres de défilement sur les ordinateurs de bureau.

<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>
6
Robin B

ça n'a pas marché pour moi! mais je pourrais comprendre un petit truc après avoir lu ce post: https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/

Il suffit de mettre un! Important après cela et fonctionne très bien!

-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
3
Renato Dantas

J'ai trouvé que les correctifs 1 et 2 fonctionnent sur iOS 11, mais aussi en chargeant une page responsive dans l'iframe, overflow-x: hidden; était également nécessaire pour empêcher l’iframe de bouger de gauche à droite lors des tentatives de défilement. Juste FYI.

2
Joe Williams

Il y a un bogue dans iOS 8 qui interrompt le défilement lorsque -webkit-overflow-scrolling: touch a été appliqué à tout ce qui est débordé.

Jetez un coup d'œil au problème que j'ai posté il y a quelques semaines: - webkit-overflow-scrolling: touch; interruptions dans iOS8 d'Apple

2
Jamie Beech

Le must est de définir votre scroll-container Sur fixed pour le div est une taille d’écran plein écran. Ensuite, à l'intérieur du iframe, créez un contenu principal avec un défilement des propriétés.

Dans votre iframe, dans le mainContainer-scroll, Vous pouvez ajouter:

  • -webkit-overflow-scrolling: touch // Pour un défilement continu actif
  • -webkit-transform: translate3d(0, 0, 0) // Pour l'accélération matérielle
  • overflow-y:scroll; // Pour ajouter le défilement dans y axe
  • position:absolute;height:100%;width:100%;top:0;left:0; // Pour réparer le conteneur

Page principale

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

À l'intérieur de l'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>
1
P. Frank

Ne sachant pas ce qui se trouve à l'autre bout de "www.iframe.com" ... mais pour moi, dans le fichier css, j'ai ajouté:

body {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

Cela l'a corrigé.

0
deep rock

J'ai réussi à faire défiler une iframe dans iOS en plaçant un iframe dans un div (qui sert de conteneur) et à appliquer les styles comme suit, ce qui fonctionne parfaitement.

.iframe {
    overflow: scroll !important;
    width: 100%;
    height: 100%;
    border: none;
}

.div {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #FFF;
}

Comme je travaille dans GWT, voici la suggestion pour les gens de GWT. Dans le cas de GWT, placez simplement un iframe dans ScrollPanel (div) et appliquez les styles comme ci-dessus.

0
Manne Teja

Vous devez utiliser le style de corps ou le débordement: scroll;

Ou aussi utiliser

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