web-dev-qa-db-fra.com

Masquer la barre de défilement horizontale sur un iframe?

Je dois masquer la barre de défilement horizontale sur une iframe en utilisant css, jquery ou js.

htmliframescrollbarhide
110
nkcmr

Je suggère de le faire avec une combinaison de

  1. CSS _overflow-y: hidden;_
  2. scrolling="no" (pour HTML4)
  3. et seamless="seamless" (pour HTML5)*

* L'attribut seamless a été supprimé de la norme et aucun navigateur soutiens le.

_.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}_
_<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>_
206
Chase Florell

définir l'attribut scrolling="no" dans votre iframe.

26
Rahul Dadhich

Si vous êtes autorisé à modifier le code du document dans votre iframe et que ce contenu n'est visible que via sa fenêtre parente, ajoutez simplement le code CSS suivant dans votre iframe:

body {
    overflow:hidden;
}

Voici un exemple très simple:

http://jsfiddle.net/u5gLoav9/

Cette solution vous permet de:

  • Conservez votre HTML5 valide car il n'a pas besoin de l'attribut scrolling="no" sur iframe (cet attribut dans HTML5 est obsolète).

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

  • Aucun JS ou jQuery nécessaire.

Remarques:

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

overflow-x: hidden;
14
GibboK

Cette réponse ne concerne que les sites Web utilisant Bootstrap. La fonction d’intégration réactive du 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

2
Razan Paul