Apprenez à créer des styles de barre de défilement dans les balises iframe et introduisez l'utilisation des balises iframe.

Cet article parle principalement des problèmes de défilement dans les balises iframe HTML. Cet article parle de la conservation et de la sauvegarde des barres de défilement des balises iframe et de la résolution de problèmes tels que les doubles barres de défilement après le chargement des iframes avec des hauteurs dynamiques.

Tout d'abord, examinons la suppression et la préservation des barres de défilement dans la balise iframe HTML :

Une fois l'iframe intégrée dans la page, nous l'avons parfois nécessaire d'ajuster les barres de défilement, par exemple, supprimer toutes les barres de défilement, supprimer la barre de défilement droite et conserver la barre de défilement inférieure, supprimer la barre de défilement inférieure et conserver la barre de défilement droite. Alors que devons-nous faire ?

Une : Supprimer toutes les barres de défilement

La première méthode : iframe a un attribut de défilement, qui a trois valeurs : auto, oui et non.

défilement : auto -----La barre de défilement apparaît lorsque nécessaire

défilement : oui ------Toujours afficher la barre de défilement

défilement : non - ------Toujours masquer les barres de défilement

Lors du défilement : non est défini, toutes les barres de défilement disparaîtront.

Deuxième méthode : j'ai trouvé qu'en plus de faire défiler pour supprimer toutes les barres de défilement, il existe une autre méthode. Définir body{overflow: Hidden} dans la page intégrée peut également supprimer les barres de défilement. propriété utilisée lorsque nous souhaitons uniquement supprimer une certaine barre de défilement.

Deux : Supprimez la barre de défilement droite et conservez la barre de défilement inférieure

Si vous souhaitez uniquement conserver la barre de défilement inférieure, vous pouvez définir le corps{ dans le overflow-x de page intégré : auto ; overflow-y : caché ;🎜>

Trois : supprimez la barre de défilement inférieure et conservez la barre de défilement de droite

Définie dans la page intégrée page body{overflow-x: Hidden; overflow-y: auto;}

Nous savons déjà que ces deux propriétés peuvent définir l'affichage et le masquage de la barre de défilement, donc lorsque les deux sont définies en même temps, lequel apparaîtra ? Quel est l'effet ?

Grâce aux tests, j'ai découvert que lors du scrolling="auto" ou "yes", si le corps est défini, les paramètres du corps seront utilisés lors du scrolling="no", quel que soit le corps ; est défini sur , le paramètre de défilement sera utilisé, c'est-à-dire que toutes les barres de défilement seront supprimées.

Parlons ensuite de la façon de supprimer la barre de défilement horizontale :

Elle peut être supprimée par la méthode suivante : Dans la page Web contenue dans l'iframe, ajoutez

<style>
html { overflow-x:hidden; }
</style>

pour supprimer la barre de défilement horizontale, et vous pouvez également utiliser la même méthode pour supprimer la barre de défilement verticale.

Résoudre le problème des doubles barres de défilement après le chargement d'une iframe avec une hauteur dynamique :

Si les données iframe sont chargées de manière asynchrone via ajax, la hauteur du div à l'intérieur est également obtenu dynamiquement. Il y a un problème ici. Lorsque le contenu du div n'est pas chargé, la hauteur de la variable ci-dessus ne peut obtenir que la hauteur non développée. Après le chargement d'ajax, la hauteur réelle ne peut toujours pas être obtenue. toutes les arborescences de documents sont chargées avant le chargement. La méthode pour obtenir la hauteur réelle

La version ultime, écrite sur la page iframe

var ht = setInterval('getHeight',100);
function getHeight(){
    if(document.readyState == 'complete'){
        var height = (document.body.scrollHeight)+'px';
        $('parentdiv',window.parent.document).css('height',height);
        window.clearInterval(gh);
    }
}

Il existe peut-être une solution plus simple, mais c'est la idée et code que j'ai rencontrés et résolus étape par étape, qui méritent d'être enregistrés. Bien sûr, l'attribut de défilement peut également être utilisé. Vous pouvez l'étudier. Si vous avez des méthodes simples, nous pouvons en discuter ensemble. Vous êtes invités à laisser un message ci-dessous

[Recommandation de l'éditeur]

.

Comment écrire un chemin relatif pour la balise de base en HTML ? (Instructions d'utilisation incluses)

Quelle est l'utilisation de l'attribut src de la balise HTML img ? Analyse des méthodes d'utilisation spécifiques (avec exemples inclus)

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!