JavaScript get window Posición X/Y para scroll

Question

Espero encontrar la manera de obtener la posición actual de la ventana visible (relativa al ancho/alto total de la página) para poder usarla para forzar un desplazamiento de una sección a otro. Sin embargo, parece haber una enorme cantidad de opciones cuando se trata de adivinar qué objeto contiene la verdadera X/Y para su navegador.

¿Cuál de estos necesito para asegurarme de 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 más? Una vez que sé dónde está la ventana, puedo establecer una cadena de eventos que lentamente llamará al window.scrollBy(x,y); hasta que llegue al punto que yo desee.

Answer 1

El método jQuery (v1.10) utiliza 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:

• Pone a prueba por primera window.pageXOffset y utiliza esa si es que existe.
• De lo contrario, usa document.documentElement.scrollLeft.
• Resta entonces document.documentElement.clientLeft si existe.

La sustracción de document.documentElement.clientLeft/Top única parezca necesario para corregir las situaciones en las que haya aplicado un borde (no relleno o margen, pero la frontera real) al elemento raíz, y por lo que, posiblemente, sólo en cierta navegadores.

Answer 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

Answer 3

uso de JavaScript puro puede utilizar 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 el propiedad pageYOffset es un alias de la propiedad scrolly:

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

Aquí es 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>

Answer 4

function FastScrollUp() 
{ 
    window.scroll(0,0) 
}; 

function FastScrollDown() 
{ 
    $i = document.documentElement.scrollHeight ; 
    window.scroll(0,$i) 
}; 
var step = 20; 
var h,t; 
var y = 0; 
function SmoothScrollUp() 
{ 
    h = document.documentElement.scrollHeight; 
    y += step; 
    window.scrollBy(0, -step) 
    if(y >= h) 
     {clearTimeout(t); y = 0; return;} 
    t = setTimeout(function(){SmoothScrollUp()},20); 

}; 


function SmoothScrollDown() 
{ 
    h = document.documentElement.scrollHeight; 
    y += step; 
    window.scrollBy(0, step) 
    if(y >= h) 
     {clearTimeout(t); y = 0; return;} 
    t = setTimeout(function(){SmoothScrollDown()},20); 

}