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

110

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

html iframe scrollbar hide nkcmr
la source
1
duplication possible: Safari / Chrome (Webkit) - Impossible de masquer la barre de défilement verticale iframe et autres
Matt Ball
iframe n'est pas sur le même domaine que la page parent.
nkcmr
overflow-y: caché; Ne fonctionne pas dans Google Chrome, Safari et Opera. Essayez-le avec jsfiddle.net/m5Btd/3
phangia2712

Réponses:

208

Je suggérerais de faire cela avec une combinaison de

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

* L' seamlessattribut a été supprimé de la norme et aucun navigateur ne le prend en charge.

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>
Développer l'extrait

Chase Florell
la source
9
J'ai chargé votre exemple sur Chrome 15 et je vois toujours les barres de défilement.
Dan
61
L'ajout de l' scrolling="no"attribut à l'iframe semble supprimer les barres de défilement dans Chrome.
Nick
2
@Nick It ne le supprime pas sur Chrome au moins sur mon ordinateur. img339.imageshack.us/img339/6685/chromelj.png
l46kok
1
@ l46kok votre capture d'écran n'inclut passcrolling="no"
Chase Florell
3
Notez que l' attribut sans apparence n'est actuellement pris en charge par aucun des principaux navigateurs . caniuse.com/#feat=iframe-s Seamless
Liyali
26

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

Rahul Dadhich
la source
15

Si vous êtes autorisé à modifier le code du document à l'intérieur de votre iframeet que ce contenu n'est visible qu'à l'aide de sa fenêtre parente, ajoutez simplement 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 d' scrolling="no"attribut sur le iframe(cet attribut dans HTML5 est obsolète).

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

  • Aucun JS ou jQuery nécessaire.

Remarques:

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

overflow-x: hidden;
GibboK
la source
2

Cette réponse ne s'applique qu'aux sites Web qui utilisent 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

Razan Paul
la source