11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Affichage inattendu avec offsetTop

Bonjour,

Mon texte étant très long, je l'ai fractionné en sections imbriquées, toutes positionnées en mode relatif.
J'utilise un "span onclick" en fin d'une section pour afficher la section suivante.
Je traite deux situations :
- affichage du début de la nouvelle section lorsque celle-ci est au même niveau que la précédente, par exemple section de niveau 2 ouvrant la section de niveau 2 suivante ; j'utilise alors la fonction Ouverture_simple(Id_Section_appelee, decalage) ;
- affichage d'une nouvelle section lorsque celle-ci est la première section fille de la section suivante de même niveau que la section d'appel, par exemple affichage du début de la première section de niveau 3 de la section de niveau 2 suivante ; j'utilise alors la fonction Ouverture_double(Id_Section_appelee, Id_Section_Premiere_fille, decalage)

Les deux fonctions sont codées comme suit :


function Ouverture_simple(Id_Section_appelee, decalage)  {			
			var Section_appelee = document.getElementById(Id_Section_appelee);
			Section_appelee.style.display = "block";			
			const Position_Section_appelee = Section_appelee.offsetTop;
			const Hauteur_Fenetre = window.innerHeight;
			const Position_Affichage = Position_Section_appelee - (Hauteur_Fenetre / 2) - decalage;
			window.scrollTo({ top: Position_Affichage, behavior: 'smooth' });
		}




function Ouverture_double(Id_Section_appelee, Id_Section_Premiere_fille, decalage)  {					
			var Section_appelee = document.getElementById(Id_Section_appelee);
			var Section_fille = document.getElementById(Id_Section_Premiere_fille);
			Section_appelee.style.display = "block";
			Section_fille.style.display = "block";
			const Position_Section_appelee = Section_appelee.offsetTop;
			const Hauteur_Fenetre = window.innerHeight;
			const Position_Affichage = Position_Section_appelee - (Hauteur_Fenetre / 2) - decalage;
			window.scrollTo({ top: Position_Affichage, behavior: 'smooth' });
		}


Les deux fonctions fonctionnent bien pour passer d'une section de niveau 2 à la section de niveau 2 suivante, et pour passer d'une section de niveau 2 à la première section de niveau 3 de la section de niveau 2 suivante.

Par contre, l'affichage remonte très haut lorsque je veux passer de la première section de niveau 3 à la deuxième section de niveau 3 !!??
Pourtant, si j'ai bien compris, la section prise en compte par offsetTop est la section de niveau 2 mère de ces deux sections de niveau 3 ?

Pouvez-vous s'il vous plaît m'aider à résoudre ce mystère, sensiblement bloquant ?
Merci pour votre aide !
Modifié par Beka (16 May 2024 - 21:23)
Bonjour,

J'ai posé la question à ChatGPT. Il m'a conseillé d'utiliser getBoundingClientRect().
Le conseil est judicieux car maintenant l'affichage fonctionne correctement.

La nouvelle fonction Ouverture_simple est maintenant codée comme suit :

function Ouverture_simple(Id_Section_appelee, decalage)  {			
	var Section_appelee = document.getElementById(Id_Section_appelee);
	Section_appelee.style.display = "block";
	const Rectangle_Section_appelee = Section_appelee.getBoundingClientRect();
	const Position_Section_appelee = Rectangle_Section_appelee.top + window.pageYOffset;
	const Hauteur_Fenetre = window.innerHeight;
	const Position_Affichage = Position_Section_appelee - (Hauteur_Fenetre / 2) - decalage;
	window.scrollTo({ top: Position_Affichage, behavior: 'smooth' });
		}

(La fonction Ouverture_double est codée sur le même modèle. La différence réside seulement dans l'ouverture conjointe de la première section fille de la section appelée.)
Modifié par Beka (17 May 2024 - 09:06)
Prévenir un modérateur
Répondre au sujet
Aller à