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ù dans la page se trouve la vue actuelle. 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 est-ce que JavaScript offre une solution plus simple que cela? Des idées au niveau du code?

Vous pouvez utiliser element.scrollTopet element.scrollLeftpour obtenir respectivement le décalage vertical et horizontal qui a été défilé. elementpeut être document.bodysi vous vous souciez de la page entière. Vous pouvez le comparer à element.offsetHeightet element.offsetWidth(encore une fois, elementpeut être le corps) si vous avez besoin de pourcentages.

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

element .scrollTop - sont les pixels cachés en haut en raison du défilement. Sans défilement, sa valeur est 0.

element .scrollHeight - correspond aux pixels de la division entière.

element .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 de scrollTop .

var c = a / b;

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

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];
    }
}

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

C'est comme ça :)

window.addEventListener("scroll", (event) => {
    let scroll = this.scrollY;
    console.log(scroll)
});

Réponse pour 2018 :

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

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

Historiquement, la détection de la visibilité d'un élément, ou de la visibilité relative de deux éléments l'un par rapport à l'autre, a été une tâche difficile pour laquelle les solutions ont été peu fiables et sujettes à ralentir le navigateur et les sites auxquels l'utilisateur accède. Malheureusement, à mesure que le Web a mûri, le besoin de ce type d'informations s'est accru. Les informations d'intersection sont nécessaires pour de nombreuses raisons, telles que:

• Le chargement paresseux d'images ou d'autres contenus pendant qu'une page défile.
• Implémentation de sites Web à «défilement infini», où de plus en plus de contenu est chargé et rendu au fur et à mesure que vous faites défiler, afin que l'utilisateur n'ait pas à parcourir les pages.
• Reporting de visibilité des publicités afin de calculer les revenus publicitaires.
• Décider d'exécuter ou non des tâches ou des processus d'animation selon 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 pour chaque élément affecté. Étant donné que tout ce code s'exécute sur le thread principal, même l'un d'entre eux peut entraîner des problèmes de performances. Lorsqu'un site est chargé avec ces tests, les choses peuvent devenir carrément laides.

Consultez 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 prennent en charge IntersectionObserver , mais vous devez utiliser le polyfill pour la compatibilité descendante.

si vous vous souciez de la page entière. vous pouvez utiliser ceci:

document.body.getBoundingClientRect().top

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 OU définir la position.

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

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
});

Je pense que la fonction suivante peut aider à avoir des valeurs de coordonnées de défilement:

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

J'ai eu cette idée de cette réponse avec un petit changement.