web-dev-qa-db-fra.com

Supprimer la barre de défilement d'iframe

Utiliser ce code

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

Voici comment il apparaît (la shoutbox sur la page d'accueil de http://www.talkjesus.com )

Comment supprimer la barre de défilement horizontale et modifier le css de la barre de défilement verticale?

htmlcssiframe
100
Faith In Unseen Things

dans votre css:

iframe{
    overflow:hidden;
}
13
takien

Ajoutez l'attribut scrolling="no" à l'iframe.

254
THRIVE

Cela fonctionne dans tous les navigateurs. jsfiddle ici http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>
26
Thyagarajan C

Ajouter scroll="no" et style="overflow:hidden" sur iframe ne fonctionnait pas, je devais ajouter style="overflow:hidden" sur le corps du document HTML chargé à l'intérieur d'iframe.

16
nirvana74v

Ajoutez simplement les attributs scrolling="no" et seamless="seamless" à la balise iframe. comme ça:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"
11
Nima Rahbar
<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

Utilisez la div ci-dessus et la barre de défilement ne sera affichée dans aucun navigateur.

9
KnightFury

Ajoutez ceci dans votre css pour cacher les deux barres de défilement

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}
8
Deepika Patel

Si quelqu'un a un problème avec la désactivation des barres de défilement sur la variable iframe, cela peut être dû au fait que le contenu de l'iframe contient des barres de défilement sur les éléments ci-dessous l'élément html!

Certaines dispositions définissent html et body sur 100% en hauteur, et utilisent un #wrapper div avec overflow: auto; (ou scroll), déplaçant ainsi le défilement vers le #wrapper element.

Dans un tel cas, rien de ce que vous ferez n'empêchera les barres de défilement de s'afficher, sauf la modification du contenu de l'autre page.

5
WraithKenny

Ajoutez ceci dans votre css pour ne cacher que la barre de défilement horizontale

iframe{
    overflow-x:hidden;
}
4
Abhidev

Essayez d’ajouter l’attribut scrolling="no" comme ci-dessous:

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>
3
Allabux B

Ceci est un dernier recours, mais il convient de mentionner - vous pouvez utiliser le pseudo-élément ::-webkit-scrollbar sur le parent de iframe pour supprimer ces fameuses barres de défilement des années 90.

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Edit: bien que relativement pris en charge , ::-webkit-scrollbar risque de ne pas convenir à tous les navigateurs. utiliser avec précaution :)

3
DotBot