Comment obtenir la position de la barre de défilement avec Javascript ?

Question

J'essaie de détecter la position de la barre de défilement du navigateur avec JavaScript pour décider où se trouve la vue actuelle dans la page. Je suppose que je dois détecter où se trouve le pouce sur la piste, puis la hauteur du pouce en pourcentage de la hauteur totale de la piste. Est-ce que je complique trop les choses ou JavaScript offre-t-il une solution plus simple que cela ? Des idées en matière de code ?

Answer 1

Si vous vous souciez de la page entière, vous pouvez utiliser ceci :

document.body.getBoundingClientRect().top

Answer 2

Ce site a une fonction en bas qui semble assez complète.

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

J'ai trouvé une autre page il y a un certain temps avec un tableau pratique de quelles propriétés fonctionnent dans quels navigateurs mais je ne peux pas le trouver en ce moment.

Answer 3

Si vous utilisez jQuery, il y a une fonction parfaite pour vous : .scrollTop()

doc ici -> http://api.jquery.com/scrollTop/

note : vous pouvez utiliser cette fonction pour récupérer OU régler la position.

voir aussi : http://api.jquery.com/?s=scroll

Answer 4

Voici l'autre façon d'obtenir la position de défilement

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

Answer 5

Snippets

El en lecture seule scrollY de l'interface Window retourne le le nombre de pixels de défilement vertical du document. .

window.addEventListener("scroll", function(){  console.log(this.scrollY)  })

html{height:5000px}

Version abrégée utilisant JavaScript ES6 et en évitant l'utilisation de this

window.addEventListener("scroll", () => { console.log(scrollY) })

html{height:5000px}