11528 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Dans une page xhtml scrollable, je souhaite récupérer la position d'un élément.

Supposons une résolution écran de 1000px en hauteur, avec un scroll vers le bas de 500px : la page mesure donc 1500px de hauteur.

Lorsque je scrolle tout en bas de la page, je souhaite connaître la hauteur scrollée : 500px dans cet exemple.

ou bien

Si j'effectue un clic droit tout en bas de la page,

je souhaite connaître la position du clic droit par rapport au haut de la page : 15OOpx dans cet exemple

(et non pas la position par rapport à la fenêtre qui me donne 1000px).

MERCI POUR VOTRE AIDE.
Modérateur
Bonjour,

Suite à un évènement (par exemple un clic ou un déplacement de souris), on peut récupérer les coordonnées de la souris par exemple par :
s=(window.scrollX+ev.clientX)+" "+(window.scrollY+ev.clientY);


Le principe général est qu'on ajoute la distance scrollée (de la fenêtre, de l'élément) à la coordonnée de la souris (ou son équivalent) dans l'élément où a lieu l'évènement.

Evidemment, il faut éventuellement adapter (l'élément a-t-il lui aussi une barre de scroll ? y-t-il des margins et des paddings ? etc.), car écrire une formule générale est lourd.

Un exemple parmi d'autres :
https://jsfiddle.net/parsimonhi/aswk4xn2/

EDIT: une autre manière de faire est d'utiliser ev.pageX et ev.pageY (on n'a plus d'addition à faire dans ce cas). Si l'évènement ev a lieu dans un élément qui recouvre l'ensemble du contenu, et que ce contenu n'a pas de margins par rapport au viewport, ça devrait le faire.
https://jsfiddle.net/parsimonhi/9wx1oyhf/

Amicalement,
Modifié par parsimonhi (19 Nov 2020 - 11:28)
Merci pour cette réponse rapide.
Malheureusement ça ne marche pas chez moi.
La valeur indiquée ne tient pas compte du scroll !
Est-ce-que j'oublie quelque chose ?
Je suis vraiment nule en JS !!!
MERCI
Modifié par denisduval75 (19 Nov 2020 - 16:46)
Modérateur
Bonjour,

Ça dépend du html, du css, de l'élément dans lequel on clique, du résultat espéré... Y a pas de recette toute faite !

EDIT: il faut du code, sinon, on répond au hasard !

Amicalement,
Modifié par parsimonhi (19 Nov 2020 - 18:10)