Iframe HTML - désactivation du défilement

Question

J'ai l'iframe suivante dans mon site :

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

Et il y a des barres de défilement.
Comment s'en débarrasser ?

Answer 1

Malheureusement, je ne pense pas que cela soit possible dans un HTML5 entièrement conforme avec seulement des propriétés HTML et CSS. Heureusement, la plupart des navigateurs prennent toujours en charge l'attribut scrolling (qui a été supprimé de la Spécification HTML5 ).

overflow n'est pas une solution pour HTML5 car le seul navigateur moderne qui à tort soutient que c'est Firefox.

Une solution actuelle consisterait à combiner les deux :

<iframe src="" scrolling="no"></iframe>

iframe {
  overflow: hidden;
}

Mais cela pourrait être rendu obsolète par les mises à jour des navigateurs. Vous pouvez consulter cette page pour trouver une solution JavaScript : http://www.christersvensson.com/html-tool/iframe.htm

Edita: J'ai vérifié et scrolling="no" fonctionnera dans IE10, Chrome 25 et Opera 12.12.

Answer 2

J'ai résolu le même problème avec ce css :

    pointer-events:none;

Answer 3

Cela semble fonctionner en utilisant

html, body { overflow: hidden; }

à l'intérieur de l'IFrame

éditer : Bien sûr, cela ne fonctionne que si vous avez accès au contenu de l'Iframe (ce qui est le cas pour moi).

Answer 4

Réglez tout le contenu sur :

#yourContent{
 width:100%;
height:100%;  // in you csss
}

Le problème est que le défilement de l'iframe est défini par le contenu et non par l'iframe lui-même.

s

Answer 5

Depuis le "overflow : hidden ;" ne fonctionne pas correctement sur l'iFrame elle-même, mais semble donner des résultats lorsqu'elle est appliquée au corps de la page à l'intérieur de l'iFrame, j'ai essayé ceci :

iframe body { overflow:hidden; }

Ce qui étonnamment a fait fonctionnent avec Firefox, en supprimant ces barres de défilement gênantes.

Dans Safari cependant, une étrange ligne transparente de 2 pixels de large est apparue sur le côté droit de l'iframe, entre son contenu et sa bordure. Étrange.