51 votes

BrainCore avatar

Safari/Chrome (Webkit) - Impossible de masquer la barre de défilement verticale d'une iframe

Demandé el 7 de Novembre, 2009
Quand la question a-t-elle été
74089 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Ouvert
Situation réelle de la question

J'ai un iframe sur www.example.com qui pointe vers support.example.com (qui est un CNAME vers un domaine étranger).

Je redimensionne automatiquement la hauteur de mon iframe afin que le cadre n'ait pas besoin de barres de défilement pour afficher la page Web qu'il contient.

Sur Firefox et IE, cela fonctionne très bien, il n'y a pas de barre de défilement car j'utilise <iframe ... scrolling="no"></iframe> . Cependant, sur les navigateurs webkit (Safari et Chrome), la barre de défilement verticale persiste même lorsqu'il y a suffisamment de place pour la page sans la barre de défilement (la barre de défilement est grisée).

Comment masquer la barre de défilement pour les navigateurs webkit ?

Demandé el 7 de Novembre, 2009 par BrainCore

0 votes

Avatar de nerdherd

Note pour la postérité : il s'agissait d'un bogue dans les navigateurs webkit qui a depuis été corrigé. Voici le rapport de bogue : bugs.webkit.org/show_bug.cgi?id=29240

Commenté el 22 de Juillet, 2013 par nerdherd

2 votes

Avatar de tinybyte

Pourquoi n'en avez-vous pas accepté ?

Commenté el 15 de Décembre, 2013 par tinybyte

Réponses

Trop de publicités?

66voto

Tim avatar
Tim Points 539

Je viens de rencontrer ce problème, et j'ai découvert que la solution était de définir overflow: hidden sur la balise HTML de la page à l'intérieur du iframe .

Répondu el 4 de Décembre, 2009 par Tim (539 Points )

0 votes

Avatar de Kragen Javier Sitaker

Dans Chrome/10.0.648.133, il semble que cela fonctionne, que l'attribut overflow:hidden soit dans l'attribut <html> dans un style en ligne, ou même dans une feuille de style externe - bien que Chrome semble être un peu trop agressif en ce qui concerne la mise en cache des feuilles de style externes. Ce bogue a peut-être été corrigé au fil des ans.

Commenté el 9 de Avril, 2011 par Kragen Javier Sitaker

0 votes

Avatar de Mori

Est-ce que cela fait une différence si j'ajoute overflow:hidden; à la body au lieu de html ?

Commenté el 29 de Avril, 2014 par Mori

53voto

palako avatar
palako Points 1702

Vous pouvez masquer les barres de défilement et conserver la fonctionnalité de défilement (par pavé tactile ou molette de défilement, ou par toucher et glisser dans un téléphone mobile ou une tablette, en utilisant :

<style>
  iframe::-webkit-scrollbar {  
    display: none;
  }  
</style>

Évidemment, vous pouvez changer iframe pour qu'il corresponde à votre conception, et vous pouvez ajouter la propriété équivalente -mozilla- pour qu'il fonctionne également dans firefox.

Répondu el 16 de Juin, 2011 par palako (1702 Points )

0 votes

Avatar de Hendrik Beenker

N'y a-t-il pas un modérateur qui puisse faire en sorte que ce soit la bonne réponse ?

Commenté el 5 de Décembre, 2012 par Hendrik Beenker

0 votes

Avatar de qes

@Hendrik c'est à l'utilisateur qui a ouvert la question de choisir une réponse correcte.

Commenté el 7 de Décembre, 2012 par qes

0 votes

Avatar de Joel Azevedo

Merci @palako. Juste une remarque, si vous voulez maintenir le scroll vertical visible, utilisez simplement : iframe::-webkit-scrollbar:horizontal {display : none;} pour ne cacher que l'horizontal.

Commenté el 16 de Juin, 2015 par Joel Azevedo
Afficher 3 autres commentaires

17voto

WillemLabu avatar
WillemLabu Points 1418 
Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.

C'est un peu un hack, mais j'ai résolu ce problème en enveloppant la fonction <iframe> dans un <div> en fixant le <div> Hauteur, largeur & overflow:hidden puis de régler le <iframe> pour dépasser la largeur et la hauteur de l'enveloppe. <div> .

<style>
  div {height:100px;width:100px;overflow:hidden}
  iframe {height:150px;width:150px;overflow:hidden}
</style>

<div>
  <iframe src="foo.html" scrolling="no"></iframe>
</div>
Répondu el 25 de Mars, 2011 par WillemLabu (1418 Points )

2 votes

Avatar de Kragen Javier Sitaker

C'est une approche de force brute qui devrait fonctionner comme une solution de contournement pour les fonctionnalités manquantes ou les bogues :)

Commenté el 9 de Avril, 2011 par Kragen Javier Sitaker

0 votes

Avatar de nuander

Il a suffi d'ajouter overflow:hidden au style de l'iframe pour que le paramètre de défilement fonctionne dans Safari, Chrome et IE.

Commenté el 24 de Octobre, 2014 par nuander

11voto

Shpigford avatar
Shpigford Points 3096

Je suppose que vous avez déjà essayé, mais avez-vous réglé le défilement sur non sur l'iframe ?

<iframe scrolling="no">
Répondu el 8 de Novembre, 2009 par Shpigford (3096 Points )

0 votes

Avatar de BrainCore

Yup. Je n'ai pas échappé à ce drapeau dans mon message, malheureusement, donc il ne s'est pas affiché.

Commenté el 9 de Novembre, 2009 par BrainCore

6voto

Simon Jackson avatar
Simon Jackson Points 99

Pour supprimer les barres de défilement grisées, ajoutez "overflow : hidden ;" à la balise body de la page affichée dans l'Iframe, par exemple. <body style="overflow:hidden;"> Cela a bien fonctionné pour moi dans Chrome 8.0.552.215 et j'avais également "overflow : hidden" sur l'Iframe lui-même.

Répondu el 10 de Décembre, 2010 par Simon Jackson (99 Points )

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X