Como obter a posição da barra de rolagem com Javascript?

Estou tentando detectar a posição da barra de rolagem do navegador com JavaScript para decidir onde está a exibição atual da página. Meu palpite é que preciso detectar onde está o polegar na pista e, em seguida, a altura do polegar como uma porcentagem da altura total da pista. Estou complicando demais ou o JavaScript oferece uma solução mais fácil que essa? Alguma idéia em termos de código?

Você pode usar element.scrollTope element.scrollLeftobter o deslocamento vertical e horizontal, respectivamente, que foram rolados. elementpode ser document.bodyse você se importa com a página inteira. Você pode compará-lo element.offsetHeighte element.offsetWidth(novamente, elementpode ser o corpo) se precisar de porcentagens.

Eu fiz isso para um <div>no Chrome.

elemento .scrollTop - são os pixels ocultos na parte superior devido à rolagem. Sem rolagem, seu valor é 0.

elemento .scrollHeight - são os pixels de toda a div.

elemento .clientHeight - são os pixels que você vê no seu navegador.

var a = element.scrollTop;

será a posição.

var b = element.scrollHeight - element.clientHeight;

será o valor máximo para scrollTop .

var c = a / b;

será a porcentagem de rolagem [de 0 a 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];
    }
}

retorna uma matriz com dois inteiros- [scrollLeft, scrollTop]

É tipo isso :)

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

Resposta para 2018 :

A melhor maneira de fazer isso é usar a API Intersection Observer .

A API Intersection Observer fornece uma maneira de observar assincronamente alterações na interseção de um elemento de destino com um elemento ancestral ou com a viewport de um documento de nível superior.

Historicamente, detectar a visibilidade de um elemento ou a visibilidade relativa de dois elementos em relação um ao outro tem sido uma tarefa difícil para a qual as soluções não são confiáveis ​​e estão sujeitas a causar lentidão no navegador e nos sites que o usuário está acessando. Infelizmente, à medida que a web amadureceu, a necessidade desse tipo de informação aumentou. As informações de interseção são necessárias por vários motivos, como:

• O carregamento lento de imagens ou outro conteúdo como uma página é rolado.
• Implementar sites da "rolagem infinita", onde cada vez mais conteúdo é carregado e renderizado à medida que você rola, para que o usuário não precise folhear as páginas.
• Relatórios de visibilidade de anúncios para calcular receitas de anúncios.
• Decidir se deve ou não executar tarefas ou processos de animação com base em se o usuário verá ou não o resultado.

A implementação da detecção de interseção no passado envolvia manipuladores de eventos e loops que chamavam métodos como Element.getBoundingClientRect () para criar as informações necessárias para cada elemento afetado. Como todo esse código é executado no thread principal, mesmo um deles pode causar problemas de desempenho. Quando um site é carregado com esses testes, as coisas podem ficar completamente feias.

Veja o seguinte exemplo de código:

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

A maioria dos navegadores modernos oferece suporte ao IntersectionObserver , mas você deve usar o polyfill para compatibilidade com versões anteriores.

se você se importa com a página inteira. você pode usar isso:

document.body.getBoundingClientRect().top

Se você estiver usando jQuery, existe uma função perfeita para você: .scrollTop ()

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

nota: você pode usar esta função para recuperar OU definir a posição.

veja também: http://api.jquery.com/?s=scroll

Aqui está a outra maneira de obter a posição de rolagem

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

Eu acho que a seguinte função pode ajudar a ter valores de coordenadas de rolagem:

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

Eu recebi essa idéia dessa resposta com uma pequena mudança.