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

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

Answer 2

J'ai fait ça pour un <div> sur Chrome.

élément .scrollTop - est le nombre de pixels cachés en haut à cause du scroll. Sans scroll, sa valeur est de 0.

élément .scrollHeight - est le nombre de pixels de la division entière.

élément .clientHeight - est le pixel que vous voyez dans votre navigateur.

var a = element.scrollTop;

sera la position.

var b = element.scrollHeight - element.clientHeight;

sera le máximo valeur pour scrollTop .

var c = a / b;

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

Answer 3

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]

Answer 4

C'est comme ça :)

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

Answer 5

Réponse pour 2018 :

La meilleure façon de faire ce genre de choses est d'utiliser la fonction API de l'observateur d'intersection .

L'API Intersection Observer fournit un moyen d'observer de manière asynchrone les changements dans 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. 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 relative la visibilité relative de deux éléments l'un par rapport à l'autre, a été une tâche difficile pour laquelle les solutions n'étaient pas fiables et avaient tendance à à faire en sorte que le navigateur et les sites auxquels l'utilisateur accède deviennent des cibles de choix. ralentissement du navigateur et des sites auxquels l'utilisateur accède. Malheureusement, le besoin de ce type d'information s'est accru avec la maturité du web. ce type d'information s'est accru. Les informations sur les intersections sont nécessaires pour de nombreuses raisons, telles que :

• Chargement paresseux d'images ou d'autres contenus lors du défilement d'une page.
• La mise en œuvre de sites web à "défilement infini", où de plus en plus de contenu est chargé et rendu au fur et à mesure du défilement, de sorte que l'utilisateur n'a pas à feuilleter les pages. de feuilleter les pages.
• Rapport sur la visibilité des publicités 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.

Mise en œuvre de la détection d'intersection dans l'événement passé impliqué et des boucles appelant des méthodes comme Element.getBoundingClientRect() pour rassembler les informations nécessaires pour chaque élément concerné. Comme tout ce code s'exécute sur le thread principal, un seul d'entre eux peut causer des problèmes de performance. Lorsqu'un site est site est chargé avec ces tests, les choses peuvent devenir franchement moches.

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 soutenir l'IntersectionObserver mais vous devriez utiliser le polyfill pour la rétrocompatibilité.