web-dev-qa-db-fra.com

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

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 sa hauteur sous forme de 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 celle-là? Des idées en code?

javascriptbrowserscrolldom-events
154
Paul

Vous pouvez utiliser element.scrollTop et element.scrollLeft pour obtenir les décalages vertical et horizontal, respectivement, qui ont été défilés. element peut être document.body si vous vous souciez de la page entière. Vous pouvez le comparer à element.offsetHeight et element.offsetWidth (encore une fois, element peut être le corps) si vous avez besoin de pourcentages.

180
Max Shawabkeh

Je l'ai fait pour un <div> sur Chrome.

élément . scrollTop - représente les pixels masqués en haut à cause du défilement. Sans défilement, sa valeur est 0.

élément . scrollHeight - sont les pixels du div entier.

élément . clientHeight - sont les pixels que vous voyez dans votre navigateur.

_var a = element.scrollTop;
_

sera la position.

_var b = element.scrollHeight - element.clientHeight;
_

sera la valeur maximale pour scrollTop .

_var c = a / b;
_

sera le pourcentage de défilement [de 0 à 1] .

113
Gatsby
document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

retourne un tableau avec deux entiers - [scrollLeft, scrollTop]

47
kennebec

c'est comme ça :)

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    console.log(scroll)
});
23
Brayan Pastor

Réponse pour 2018 :

La meilleure façon de faire des choses comme ça est d'utiliser = Intersection Observer API .

L'API Intersection Observer permet d'observer de manière asynchrone les modifications de l'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre de visualisation d'un document de niveau supérieur.

Historiquement, détecter la visibilité d'un élément, ou la visibilité relative de deux éléments l'un par rapport à l'autre, était une tâche difficile pour laquelle les solutions étaient peu fiables et susceptibles de provoquer le ralentissement du navigateur et des sites auxquels l'utilisateur accède. Malheureusement, à mesure que le Web a mûri, le besoin de ce type d’information a augmenté. Les informations sur les intersections sont nécessaires pour plusieurs raisons, telles que:

  • Le chargement paresseux d'images ou d'autres contenus pendant le défilement d'une page.
  • Implémentation de sites Web "à défilement infini", dans lesquels de plus en plus de contenu est chargé et restitué au fur et à mesure que vous faites défiler, de sorte que l'utilisateur ne soit pas obligé de parcourir les pages.
  • Rapport sur la visibilité des annonces afin de calculer les revenus publicitaires.
  • Décider d’effectuer ou non des tâches ou des processus d’animation en fonction du fait que l’utilisateur verra ou non le résultat.

L'implémentation de la détection d'intersection dans le passé impliquait des gestionnaires d'événements et des boucles appelant des méthodes telles que Element.getBoundingClientRect () pour générer les informations nécessaires à chaque élément affecté. Puisque tout ce code est exécuté sur le thread principal, même l’un d’eux peut entraîner des problèmes de performances. Quand un site est chargé avec ces tests, les choses peuvent devenir carrément laides.

Voir l'exemple de code suivant:

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

La plupart des navigateurs modernes supporte IntersectionObserver , mais vous devez utiliser le polyfill pour la compatibilité ascendante.

9
str

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

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

remarque: vous pouvez utiliser cette fonction pour récupérer OR définir la position.

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

4
Simon the Salmon

Voici l'autre moyen 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
});
1
Gor