Avoir la position scroll à chaque défilement de la page avec getScrollPosition

Résolu/Fermé

rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - Modifié le 9 mars 2019 à 08:04
rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - 12 mars 2019 à 07:52

Bonjour, après avoir fait plusieurs recherche sur google et sur certain forum je n'ai pas réussi à obtenir un résultat mais qui n'est pas satisfaisant ce qui m'a permis de postuler cet question et vous demande votre aide s'il vous plaît.

En fait j'aimerais obtenir la position du scroll à chaque défilement de la page comme l'image suivant et en jquery si c'est possible:

En faisant quelque recherche je suis tombé sur un code qui je ne sais pas si ça fonctionne mais je ne sais pas comment récupérer la valeur. Voici le code:

function getScrollPosition()
{
        return  Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);
}

Vous avez une idée? ou une autre suggestion. Merci!

Configuration: Windows / Firefox 65.0

A voir également:

Avoir la position scroll à chaque défilement de la page avec getScrollPosition
Supprimer une page word - Guide
Traduire la page - Guide
Page d'accueil iphone - Guide
Partage de position - Guide
La page ne peut être affichée. (80710a06) - Forum PS3

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
9 mars 2019 à 12:48

Bonjour,

Tu dois faire appel à ta fonction lors de l'évènement scroll...

object.addEventListener("scroll", myfonction);

object étant, ici, ton tableau par exemple....
Puis utiliser la propriété scrollTop pour savoir à quel endroit se trouve l'utilisateur.

rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 9
11 mars 2019 à 07:59

Merci mais je suis un peu perdu, pouvez-vous donnez un exemple s'il vous plaît: en fait je ne sais pas exactement comment mettre en pratique votre suggestion avec mon code. j'ai fait quelque chose du genre:

window.addEventListener("scroll", function(getScrollPosition) {
                        
  });

Pouvez vous rectifier? et puis comment obtenir ensuite la propriété scrollTop? J'ai fais getScrollPosition(window.pageXOffset) et ça retourne 0,0. En fait j'ai du mal a appeler un tableau retourné par la fonction puis utiliser son propriété même en lisant quelque documentation.

Cordialement,

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
11 mars 2019 à 08:22

As tu regardé les exemples donnés dans le lien que je t'ai donné ?

En voici un adapté à tes besoins

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  overflow: scroll;
}
</style>
</head>
<body>

<p>This example uses the addEventListener() method to attach a "scroll" event to a div element.</p>

<p>Try the scrollbar in the div</p>
<div id="myDIV">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("scroll", myFunction);

function myFunction() {
  var  intElemScrollTop = document.getElementById("myDIV").scrollTop;
  document.getElementById("demo").innerHTML = "Scroll :" + intElemScrollTop;
}
</script>

</body>
</html>

Réponse 2 / 2

rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 9
12 mars 2019 à 07:52

Ça marche à merveille, merci beaucoup pour votre aide, je n'attends pas mieux, j'ai d'autre question mais je préfère ouvrir un nouveau sujet! je marque celui-ci comme résolu, encore merci :-) !!

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page

Chemin Logo du site de la Cité de l'espace

[référencement] Ne pas être référencé

A quoi sert la touche "scroll lock" ?

recherche d'u

Discussions similaires

Newsletters