Selon l'iOS d'Apple mantra il devrait être possible de faire défiler le contenu d'une IFRAME en le faisant glisser avec deux doigts. Malheureusement, l'exécution de la dernière version d'iOS sur l'iPad, je n'ai pas encore trouvé un seul site avec un IFRAME qui permet de faire défiler à l'aide de cette méthode, pas de barres de défilement apparaissent.
Personne ne sait comment un utilisateur est censé faire défiler le contenu d'une IFRAME avec le navigateur Safari mobile?
-webkit-overflow-scrolling:touch comme mentionné dans la réponse est en effet la solution possible.
<div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;">
<iframe src="YOUR_PAGE_URL" width="600" height="400"></iframe>
</div>
Mais si vous êtes incapable de faire défiler de haut en bas à l'intérieur de l'iframe, comme indiqué dans l'image ci-dessous,
vous pouvez essayer de défilement à 2 doigts de la diagonale de ce genre,
Cela a fonctionné dans mon cas, il suffit donc de le partager si vous n'avez pas encore trouvé une solution pour ce.
Il ne semble pas que les iframes écran et faire défiler correctement. Vous pouvez utiliser une balise object pour remplacer un iframe et le contenu sera défilement à 2 doigts. Voici un exemple simple:
<html>
<head>
<meta name="viewport" content="minimum-scale=1.0; maximum-scale=1.0; user-scalable=false; initial-scale=1.0;"/>
</head>
<body>
<div>HEADER - use 2 fingers to scroll contents:</div>
<div id="scrollee" style="height:75%;" >
<object id="object" height="90%" width="100%" type="text/html" data="http://en.wikipedia.org/"></object>
</div>
<div>FOOTER</div>
</body>
</html>
Comme mentionné dans d'autres commentaires, la combinaison de css valeurs de overflow: auto; & -webkit-débordement-défilement: toucher;
fonctionne quand il est appliqué à la FOIS à l'iframe en question ET de son parent div
Avec le malheureux effet secondaire de la double barres de défilement sur la non-touch navigateurs.
La solution que j'ai utilisée était d'ajouter ces css valeurs via javascript/jquery. Ce qui m'a permis d'utiliser une base de css pour tous les navigateurs
if (isSafariBrowser()){
$('#parentDivID').css('overflow', 'auto');
$('#parentDivID').css('-webkit-overflow-scrolling', 'touch');
$('#iframeID').css('overflow', 'auto');
$('#iframeID').css('-webkit-overflow-scrolling', 'touch');
}
où isSafariBrowser() est défini comme le foll...
var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
function isSafariBrowser(){
if (is_safari){
if (is_chrome) // Chrome seems to have both Chrome and Safari userAgents
return false;
else
return true;
}
return false;
}
Cela a permis à ma demande de travailler sur un iPad Note 1) Pas testé sur d'autres systèmes ios 2) Non testé sur les navigateurs Android sur les tablettes, peut nécessiter des modifications supplémentaires
(si cette solution peut ne pas être complète)
C'est ce que j'ai fait pour passer iframe scrolling de travailler sur l'iPad. Notez que cette solution ne fonctionne que si vous maîtrisez le html qui est affiché à l'intérieur de l'iframe. Il s'est éteint par défaut iframe scrolling, et au lieu de cela provoque le corps de la balise à l'intérieur de l'iframe pour les faire défiler.
main.html:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
position: absolute;
top: 50px;
left: 50px;
width: 400px;
height: 300px;
overflow: hidden;
}
#iframe {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div id="container">
<iframe src="test.html" id="iframe" scrolling="no"></iframe>
</div>
</body>
</html>
test.html:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
body {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
padding: 8px;
}
</style>
</head>
<body>
…
</body>
</html>
La même chose peut probablement être réalisée à l'aide de jQuery si vous préférez:
$("#iframe").contents().find("body").css({
"height": "100%";
"overflow": "auto";
"-webkit-overflow-scrolling": "touch";
});
J'ai utilisé cette solution pour obtenir TinyMCE (wordpress éditeur) pour faire défiler correctement sur l'iPad.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
