¿Cómo obtener la posición de la barra de desplazamiento con Javascript?

Estoy tratando de detectar la posición de la barra de desplazamiento del navegador con JavaScript para decidir en qué parte de la página se encuentra la vista actual. Supongo que tengo que detectar dónde está el pulgar en la pista, y luego la altura del pulgar como un porcentaje de la altura total de la pista. ¿Lo estoy complicando demasiado o JavaScript ofrece una solución más fácil que esa? ¿Alguna idea de código sabio?

Puede usar element.scrollTopy element.scrollLeftpara obtener el desplazamiento vertical y horizontal, respectivamente, que se ha desplazado. elementpuede ser document.bodysi te importa toda la página. Puede compararlo con element.offsetHeighty element.offsetWidth(nuevamente, elementpuede ser el cuerpo) si necesita porcentajes.

Lo hice por un <div>en Chrome.

element .scrollTop : son los píxeles ocultos en la parte superior debido al desplazamiento. Sin desplazamiento, su valor es 0.

elemento .scrollHeight : son los píxeles de todo el div.

element .clientHeight : son los píxeles que ve en su navegador.

var a = element.scrollTop;

Será el puesto.

var b = element.scrollHeight - element.clientHeight;

será el valor máximo para scrollTop .

var c = a / b;

será el porcentaje de desplazamiento [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];
    }
}

devuelve una matriz con dos enteros: [scrollLeft, scrollTop]

Es como esto :)

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

Respuesta para 2018 :

La mejor manera de hacer cosas así es usar la API Intersection Observer .

La API Intersection Observer proporciona una manera de observar asincrónicamente los cambios en la intersección de un elemento de destino con un elemento ancestro o con la ventana de un documento de nivel superior.

Históricamente, detectar la visibilidad de un elemento, o la visibilidad relativa de dos elementos en relación entre sí, ha sido una tarea difícil para la que las soluciones no han sido confiables y propensas a hacer que el navegador y los sitios a los que accede el usuario se vuelvan lentos. Desafortunadamente, a medida que la web ha madurado, la necesidad de este tipo de información ha crecido. La información de intersección es necesaria por muchas razones, tales como:

• Desplazamiento lento de imágenes u otro contenido a medida que se desplaza una página.
• Implementación de sitios web de "desplazamiento infinito", donde cada vez se carga más contenido y se procesa a medida que se desplaza, para que el usuario no tenga que pasar las páginas.
• Informe de visibilidad de anuncios para calcular los ingresos publicitarios.
• Decidir si realizar o no tareas o procesos de animación en función de si el usuario verá o no el resultado.

La implementación de la detección de intersecciones en el pasado involucraba controladores de eventos y métodos de llamada de bucles como Element.getBoundingClientRect () para generar la información necesaria para cada elemento afectado. Dado que todo este código se ejecuta en el hilo principal, incluso uno de estos puede causar problemas de rendimiento. Cuando un sitio se carga con estas pruebas, las cosas pueden ponerse completamente feas.

Vea el siguiente código de ejemplo:

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 mayoría de los navegadores modernos admiten IntersectionObserver , pero debe usar el polyfill para compatibilidad con versiones anteriores.

si te importa toda la página. puedes usar esto:

document.body.getBoundingClientRect().top

Si está utilizando jQuery, existe una función perfecta para usted: .scrollTop ()

Doc aquí -> http://api.jquery.com/scrollTop/

nota: puede usar esta función para recuperar O establecer la posición.

ver también: http://api.jquery.com/?s=scroll

Aquí está la otra forma de obtener la posición de desplazamiento

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

Creo que la siguiente función puede ayudar a tener valores de coordenadas de desplazamiento:

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

Tengo esta idea de esta respuesta con un pequeño cambio.