JavaScript ottiene la posizione X / Y della finestra per lo scorrimento

Spero di trovare un modo per ottenere l'attuale posizione della finestra visualizzabile (rispetto alla larghezza / altezza totale della pagina) in modo da poterlo usare per forzare uno scorrimento da una sezione all'altra. Tuttavia, sembra esserci un'enorme quantità di opzioni quando si tratta di indovinare quale oggetto contiene la vera X / Y per il browser.

Di quali di questi ho bisogno per assicurarmi che IE 6+, FF 2+ e Chrome / Safari funzionino?

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 ce ne sono altri? Una volta che so dove si trova la finestra, posso impostare una catena di eventi che chiamerà lentamente window.scrollBy(x,y);fino a raggiungere il punto desiderato.

Il metodo utilizzato da jQuery (v1.10) per trovare questo è:

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

Questo è:

• window.pageXOffsetPrima prova e lo usa se esiste.
• Altrimenti, usa document.documentElement.scrollLeft.
• Quindi sottrae document.documentElement.clientLeftse esiste.

La sottrazione di document.documentElement.clientLeft/ Topsembra essere richiesta solo per correggere situazioni in cui è stato applicato un bordo (non riempimento o margine, ma bordo effettivo) all'elemento radice e, possibilmente, solo in alcuni browser.

Forse più semplice;

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

Crediti: so.dom.js # L492

Usando javascript puro puoi usare Window.scrollX e Window.scrollY

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

Appunti

La proprietà pageXOffset è un alias per la proprietà scrollX e La proprietà pageYOffset è un alias per la proprietà scrollY:

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

Ecco una breve demo

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>

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

}