Búsqueda de sitios web

JavaScript obtener posición X/Y de la ventana para desplazamiento

Espero encontrar una manera de obtener la posición de la ventana actualmente visible (en relación con el ancho/alto total de la página) para poder usarla para forzar un desplazamiento de una sección a otra. Sin embargo, parece haber una cantidad tremenda de opciones cuando se trata de adivinar qué objeto contiene las verdaderas coordenadas X/Y para tu navegador.

¿Cuál de estos necesito para asegurar que IE 6+, FF 2+ y Chrome/Safari funcionen?

window.innerWidth
window.innerHeight
window.pageXOffset
window.pageYOffset
document.documentElement.clientWidth
document.documentElement.clientHeight
document.documentElement.scrollLeft
document.documentElement.scrollTop
document.body.clientWidth
document.body.clientHeight
document.body.scrollLeft
document.body.scrollTop

¿Y hay otros? Una vez que sé dónde está la ventana, puedo establecer una cadena de eventos que llamará lentamente a window.scrollBy(x,y); hasta que alcance el punto deseado.

Respuesta #1

El método que jQuery (v1.10) usa para encontrar esto es:

var doc = document.documentElement;
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

Eso es:

  • Primero prueba window.pageXOffset y lo usa si existe.
  • De lo contrario, usa document.documentElement.scrollLeft.
  • Luego resta document.documentElement.clientLeft si existe.

La sustracción de document.documentElement.clientLeft/Top solo parece ser necesaria para corregir situaciones en las que se ha aplicado un borde (no relleno ni margen, sino un borde real) al elemento raíz, y aun así, posiblemente solo en ciertos navegadores.

Actualización febrero 2024:

Hoy en día, jQuery básicamente solo usa window.pageXOffset y window.pageYOffset sin nada del resto.

var left = window.pageXOffset;
var top = window.pageYOffset;

Curiosamente, pageXOffset y pageYOffset son no estándar. La alternativa basada en estándares es scrollX y scrollY. Pero todos los navegadores modernos asignan un alias de estos a pageXOffset y pageYOffset por compatibilidad, y su uso en algo tan importante como jQuery significa que son bastante seguros de usar en el futuro previsible.

Si no te importa Internet Explorer 11 o versiones anteriores (lo cual probablemente no necesitas en este momento), entonces puedes usar scrollX y scrollY.

Respuesta #2

Quizás más simple;

var top  = window.pageYOffset || document.documentElement.scrollTop,
    left = window.pageXOffset || document.documentElement.scrollLeft;

Créditos: so.dom.js#L492

Respuesta #3

Usando JavaScript puro puedes usar Window.scrollX y Window.scrollY

window.addEventListener("scroll", function(event) {
    var top = this.scrollY,
        left =this.scrollX;
}, false);

Notas

La propiedad pageXOffset es un alias de la propiedad scrollX, y la propiedad pageYOffset es un alias de la propiedad scrollY:

window.pageXOffset == window.scrollX; // always true
window.pageYOffset == window.scrollY; // always true

Aquí hay una demostración rápida

window.addEventListener("scroll", function(event) {
  
    var top = this.scrollY,
        left = this.scrollX;
  
    var horizontalScroll = document.querySelector(".horizontalScroll"),
        verticalScroll = document.querySelector(".verticalScroll");
    
    horizontalScroll.innerHTML = "Scroll X: " + left + "px";
      verticalScroll.innerHTML = "Scroll Y: " + top + "px";
  
}, false);
*{box-sizing: border-box}
:root{height: 200vh;width: 200vw}
.wrapper{
    position: fixed;
    top:20px;
    left:0px;
    width:320px;
    background: black;
    color: green;
    height: 64px;
}
.wrapper div{
    display: inline;
    width: 50%;
    float: left;
    text-align: center;
    line-height: 64px
}
.horizontalScroll{color: orange}
<div class=wrapper>
    <div class=horizontalScroll>Scroll (x,y) to </div>
    <div class=verticalScroll>see me in action</div>
</div>

Artículos relacionados