Masquer la barre de défilement horizontale dans une iframe ?

Question

J'ai besoin de masquer la barre de défilement horizontale sur une iframe en utilisant css, jquery ou js.

Answer 1

Je suggère de faire cela avec une combinaison de

1. CSS overflow-y: hidden;
2. scrolling="no" (pour HTML4)

3. y seamless="seamless" (pour HTML5)

   <style> .foo{width:200px; height:200px; overflow-y: hidden;} </style>

   <iframe src="http://bing.com" class="foo" scrolling="no" seamless="seamless"></iframe>

Voici mon exemple : http://jsfiddle.net/m5Btd/2095/

Answer 2

Set 'scrolling'= 'no' dans votre iframe.

Answer 3

Si vous êtes autorisé à changer le code du document à l'intérieur de votre iframe et que ce contenu n'est visible qu'à l'aide de sa fenêtre parent, il suffit d'ajouter le CSS suivant dans votre iframe :

body {
    overflow:hidden;
}

Voici un exemple très simple :

http://jsfiddle.net/u5gLoav9/

Cette solution vous permet de :

• Gardez votre HTML5 valide car il n'a pas besoin de scrolling="no" de l'attribut iframe (cet attribut a été déprécié dans HTML5).

• Fonctionne sur la majorité des navigateurs utilisant les CSS débordement:caché

• Aucun JS ou jQuery n'est nécessaire.

Notes :

Pour interdire les barres de défilement horizontales, utilisez plutôt ce CSS :

overflow-x: hidden;

Answer 4

Cette réponse ne s'applique qu'aux sites Web qui utilisent Bootstrap. La fonction d'intégration réactive de Bootstrap prend en charge les barres de défilement.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div> 

jsfiddle : http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed