JavaScript obter janela posição X / Y para rolagem

Espero encontrar uma maneira de obter a posição atual da janela visível (em relação ao total da largura / altura da página) para que eu possa usá-la para forçar um deslocamento de uma seção para outra. No entanto, parece haver uma enorme quantidade de opções quando se trata de adivinhar qual object contém o verdadeiro X / Y para o seu navegador.

Qual deles eu preciso garantir que o IE 6+, o FF 2+ e o Chrome / Safari funcionem?

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 

E existem outros? Quando eu souber onde a janela está, posso definir uma cadeia de events que irá chamar lentamente window.scrollBy(x,y); até atingir o meu ponto desejado.

O método que o jQuery (v1.10) usa para descobrir isso é:

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

Isso é:

  • Ele testa primeiro o window.pageXOffset e o usa se existir.
  • Caso contrário, ele usa document.documentElement.scrollLeft .
  • Em seguida, ele subtrai document.documentElement.clientLeft se existir.

A subtração de document.documentElement.clientLeft / Top só parece ser necessária para corrigir situações em que você aplicou uma borda (não preenchimento ou margem, mas borda real) ao elemento raiz e, possivelmente, apenas em certos navegadores.

Talvez mais simples;

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

Créditos: so.dom.js # L492

Usando o javascript puro, você pode usar Window.scrollX e Window.scrollY

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

Notas

A propriedade pageXOffset é um alias para a propriedade scrollX e a propriedade pageYOffset é um alias para a propriedade scrollY:

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

Aqui está uma demonstração 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} 
 
Scroll (x,y) to
see me in action
 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); }