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.

— nkcmr
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

208

Je suggérerais de faire cela avec une combinaison de

CSS overflow-y: hidden;
scrolling="no" (pour HTML4)
~~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
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
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
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
source