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

Question

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 está 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 en cuanto al código?

Answer 1

Puede usar element.scrollTop y element.scrollLeft para obtener el desplazamiento vertical y horizontal, respectivamente, que se ha desplazado. element puede ser document.body si te importa la página completa. Puede compararlo a element.offsetHeight y element.offsetWidth (de nuevo, element puede ser el cuerpo) si necesita porcentajes.

Answer 2

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 integers- [scrollLeft, scrollTop]

Answer 3

Hice esto por un <div> en Chrome.

elemento.scrollTop - es los píxeles ocultos en la parte superior debido al desplazamiento. Sin desplazamiento de su valor es 0.

elemento.scrollHeight - es los píxeles de todo el div.

elemento de .clientHeight - es los píxeles que se ven en su navegador.

var a = element.scrollTop; 

será la posición.

var b = element.scrollHeight - element.clientHeight; 

será el valor máximo a scrollTop.

var c = a/b; 

será el porcentaje de desplazamiento [de 0 a 1].

Answer 4

Si está utilizando jQuery no es una función perfecta para ti: .scrollTop()

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

Nota: se puede utilizar esta función para recuperar o establecer la posición.

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

Answer 5

respuesta para el 2018:

La mejor manera de hacer las cosas de esa manera es utilizar el Intersection Observer API.

API El Intersección Observador proporciona una manera de observar de forma asíncrona cambios en la intersección de un elemento de objetivo con un elemento antepasado o con ventana del documento de nivel superior.

Históricamente, la detección de la visibilidad de un elemento, o la relativa visibilidad de dos elementos en relación el uno al otro, ha sido una tarea difícil para que soluciones han sido poco fiables y propensos a haciendo que el navegador y los sitios que el usuario está accediendo para convertirse en lento. Desafortunadamente, a medida que la web ha madurado, la necesidad de este tipo de información ha crecido. Se necesita información intersección de muchas razones, tales como:

• Lazy-carga de imágenes o de otros contenidos como una página se desplaza.
• La implementación de "desplazamiento" infinita sitios web, donde se carga y se hace mientras se desplaza de manera que el usuario no hace más y más contenido tienen que pasar de página.
• Notificación de la visibilidad de los anuncios con el fin de calcular los ingresos por publicidad.
• decidir si o no para llevar a cabo tareas o procesos de animación en función de si o no el usuario verá el resultado.

implementar la detección de intersección en el caso de los involucrados pasado manipuladores y bucles que llaman métodos como Element.getBoundingClientRect() para acumular la información necesaria para todos los elementos afectados. Como todo este código se ejecuta en el hilo principal, incluso uno de estos puede causar problemas de rendimiento. Cuando un sitio es cargado con estas pruebas, las cosas pueden ponerse muy feas.

Véase el ejemplo de código siguiente:

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 medida que el browser support no es muy grande, se debe utilizar IntersectionObserver polyfill.