Maison > interface Web > tutoriel CSS > Comment puis-je désactiver efficacement les barres de défilement dans une iframe HTML ?

Comment puis-je désactiver efficacement les barres de défilement dans une iframe HTML ?

DDD
Libérer: 2024-12-07 08:33:12
original
593 Les gens l'ont consulté

How Can I Effectively Disable Scrollbars in an HTML iframe?

Désactiver les barres de défilement dans une iframe HTML

Les éléments Iframe fournissent un moyen d'intégrer du contenu externe dans une page Web. Cependant, activer le défilement dans ces iframes peut créer un encombrement visuel indésirable. Cet article aborde le problème de la désactivation des barres de défilement lors de l'utilisation d'éléments iframe.

Le code HTML fourni dans la question illustre l'utilisation des iframes, en utilisant les attributs HTML et CSS :

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no">
Copier après la connexion

Malgré l'utilisation de scrolling="no", les barres de défilement apparaissent toujours. Pour approfondir la solution, il est crucial de comprendre le statut de l'attribut de défilement en HTML5.

Malheureusement, la propriété de défilement a été omise de la spécification HTML5. Cependant, la plupart des navigateurs actuels continuent de le prendre en charge. La propriété overflow à elle seule n'est pas une solution viable en HTML5, car Firefox est le seul navigateur moderne qui la prend en charge par erreur.

Une solution de contournement pratique consiste à combiner les deux approches :

<iframe src="" scrolling="no"></iframe>
Copier après la connexion
iframe {
  overflow: hidden;
}
Copier après la connexion

Cette solution risque de devenir obsolète à mesure que les navigateurs évoluent. Pour une solution plus complète utilisant JavaScript, reportez-vous au lien fourni dans la réponse acceptée.

Modifier : Selon les tests, la définition de scrolling="no" désactive efficacement les barres de défilement dans IE10 et Chrome 25. , et Opéra 12.12.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal