Supprimer la barre de défilement de l'iframe

117

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 cela 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?

html css iframe La foi dans les choses invisibles
la source
2
dupliquer avec stackoverflow.com/questions/4856746/… qui a une meilleure réponse
Daniël Tulp

Réponses:

9

dans votre css:

iframe{
    overflow:hidden;
}
takien
la source
7
Merci, mais le défilement horizontal uniquement et apparaît toujours dans Firefox. Ne s'affiche pas dans Chrome ni dans IE. De plus, le CSS pour la barre de défilement n'est appliqué efficacement que dans IE, pas dans FF ni dans Chrome (ce dernier affiche une couleur / des nuances beiges par défaut).
Faith In Unseen Things
3
Cela ne fonctionnera pas car le débordement se produit dans le document iframe, que vous ne pourrez généralement pas modifier en raison des restrictions de sécurité iframe interdomaines.
thdoan
54
Cela ne fonctionne pas car cela n'affectera pas le contenu de l'iframe, juste l'iframe lui-même. La solution est scrolling = "non".
TheLD
4
Ceci est une réponse incorrecte, ne supprime pas les barres de défilement dans Google Chrome, mais scrolling = "no" le fait.
Anders Lindén
@LarsVandeDonk Votre réponse devrait être la bonne solution.
Wong Jia Hau
314

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

PROSPÉRER
la source
1
capable de faire cela avec css?
Evorlor
1
Oui, mais dans Chrome, vous ne pouvez pas utiliser scrollIntoView. Voir code.google.com/p/chromium/issues/detail?id=137214
Peter Brand
1
Eh bien, cela masque la barre de défilement du contenu et empêche le défilement du contenu. cela n'empêche pas la barre de défilement de l'iframe d'apparaître.
Dave Cousineau
3
L'attribut de défilement sur l'iframe est maintenant officiellement obsolète. CSS doit être utilisé à la place.
Mike Poole
4
@MikePoole Cela pourrait être officiellement obsolète, mais cela n'a pas aidé à configurer overflow:hidden;Chrome 65.0.3325.181, mais a scrolling="no"aidé.
certains
28

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>
Thyagarajan C
la source
21

L'ajout scroll="no"et l' style="overflow:hidden"iframe ne fonctionnaient pas, j'ai dû ajouter style="overflow:hidden"le corps du document html chargé dans l'iframe.

nirvana74v
la source
1
Si cela aide, il y a un problème dans Firefox, où si vous avez un élément CSS transform: scale(0.7)ou autre, cela créera des barres de défilement (qui apparaîtront dans votre iFrame), sauf si vous le coupez avec overflow: hidden;un ancêtre (pourrait être un div au lieu de corps).
WraithKenny
8
C'est parce que c'est «scrolling = no», pas «scroll = no».
Bryan Green
voulez-vous dire chargé à l'intérieur de notre chargé? Qu'y a-t-il autour de quoi?
João Pimentel Ferreira
chargé à l'intérieur de <iframe src = "/ test.html"> où test.html a ce paramètre.
nirvana74v
16

Essayez d'ajouter un scrolling="no"attribut comme ci-dessous:

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>
Développer l'extrait

Allabux B
la source
11

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

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"
Nima Rahbar
la source
13
L'attribut transparent a été supprimé du HTML .
neopickaze
Vous devez utiliser css au lieu de l'attribut transparent.
Nima Rahbar
@NimaRahbar L'attribut transparent est peut-être obsolète, mais css ne prend pas en charge les paramètres iframe.
Panier abandonné
9

Si quelqu'un ici a un problème avec la désactivation des barres de défilement sur le iframe, c'est peut-être parce que le contenu de l'iframe a des barres de défilement sur les éléments sous l' htmlélément!

Certaines mises en page sont définies htmlet bodyà 100% de hauteur, et utilisent un #wrapperdiv avec overflow: auto;(ou scroll), déplaçant ainsi le défilement vers l' #wrapperélément.

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

WraithKenny
la source
8 
<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 le div ci-dessus et il n'affichera la barre de défilement dans aucun navigateur.

KnightFury
la source
3
seamlessL'attribut n'est pas du HTML5 valide, n'est pas pris en charge par la plupart des navigateurs ( caniuse.com/#search=s Seamless ), et la plupart des autres styles sont inutiles.
Pere le
8

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

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}
Deepika Patel
la source
6

C'est un dernier recours, mais il vaut la peine de le mentionner - vous pouvez utiliser le ::-webkit-scrollbarpseudo-élément sur le iframeparent de s pour vous débarrasser de ces fameuses barres de défilement des années 90.

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

Edit: bien qu'il soit relativement pris en charge , ::-webkit-scrollbarpeut ne pas convenir à tous les navigateurs. utiliser avec précaution :)

DotBot
la source
2
C'est la seule réponse qui m'a aidé. Vous pouvez toujours faire défiler mais vous ne voyez pas la vilaine barre de défilement. Je vous remercie!
Karmidzhanov
4

Ajoutez ceci dans votre css pour masquer uniquement la barre de défilement horizontale

iframe{
    overflow-x:hidden;
}
Abhidev
la source
3 
iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

De cette façon, vous rendez la largeur de l'Iframe plus grande qu'elle ne devrait l'être. Ensuite, vous masquez la barre de défilement horizontale avec overflow-x: hidden.

Nico Grill
la source