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
source

2

dupliquer avec stackoverflow.com/questions/4856746/… qui a une meilleure réponse

— Daniël Tulp

9

dans votre css:

iframe{
    overflow:hidden;
}

— takien
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
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
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
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
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
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
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
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
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
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
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
source