javascript - tab - title html

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

Question

Espero encontrar una forma de obtener la posición de la ventana visible actual (relativa al 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 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 funcionan?

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 llegue a mi punto deseado.

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

Es decir:

• window.pageXOffset primero window.pageXOffset y lo usa si existe.
• De lo contrario, usa document.documentElement.scrollLeft .
• A continuación, resta document.documentElement.clientLeft si existe.

La resta de document.documentElement.clientLeft / Top solo parece ser necesaria para corregir situaciones en las que haya aplicado un borde (no relleno o margen, pero borde real) al elemento raíz, y en ese caso, posiblemente solo en ciertos navegadores.

Answer 2

Tal vez más simple;

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

Créditos: so.dom.js#L492

Answer 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 pageOFFset es un alias para la propiedad scrollX y la propiedad pageYOffset es un alias para 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>

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