web-dev-qa-db-fra.com

HTML iframe - désactive le défilement

J'ai l'iframe suivant sur 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 a des barres de défilement.
Comment se débarrasser d'eux?

htmlcssiframe
61
Michał Herman

Malheureusement, je ne pense pas que ce soit possible dans une conformité totale à HTML5 avec uniquement les propriétés HTML et CSS. Heureusement cependant, la plupart des navigateurs prennent toujours en charge la propriété scrolling (qui a été supprimée de la spécification HTML5 ).

overflow n'est pas une solution pour HTML5, car le seul navigateur moderne compatible à tort est Firefox.

Une solution actuelle consisterait à combiner les deux:

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

iframe {
  overflow: hidden;
}

Mais cela pourrait être rendu obsolète à la mise à jour des navigateurs. Vous voudrez peut-être vérifier ceci pour une solution JavaScript: http://www.christersvensson.com/html-tool/iframe.htm

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

135
James Donnelly

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

    pointer-events:none;
13
John Smith

Il semble fonctionner en utilisant 

html, body { overflow: hidden; }

à l'intérieur l'IFrame

edit: Bien sûr, cela ne fonctionne que si vous avez accès au contenu de l'Iframe (que j'ai dans mon cas)

6
Alex

Définissez tout le contenu sur:

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

Le fait est que le défilement d'iframe est défini par le contenu et non par l'iframe.

définir le contenu à 100% à l'intérieur avec CSS et le désiré pour l'iframe en HTML

2
Verde Mc

Ajoutez ces styles..pour votre tag iframe .. 

overflow-x:hidden;
overflow-y:hidden;
0
sasi

J'ai essayé de faire défiler = "non" dans mon navigateur actuel (version de Google Chrome 60.0.3112.113 (Build officiel) (64 bits)) et cela n'a pas fonctionné. Cependant, scroll = "no" a fonctionné. Pourrait être utile d'essayer

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-Origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>
0
Zach Imholte

Il suffit d’ajouter un iframe de style semblable à l’une des options ci-dessous. J'espère que cela résout le problème.

1ère option:

<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

2ème option:

<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>
0
Arshadul Hossain

sous les versions html5

iframe {
    overflow:hidden;
}

En html5

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

mais pas encore supporté correctement

0
Prashobh