JavaScript pobiera pozycję X / Y okna do przewijania

Mam nadzieję, że znajdę sposób na uzyskanie aktualnej pozycji widocznego okna (w stosunku do całkowitej szerokości / wysokości strony), dzięki czemu będę mógł użyć go do wymuszenia przewijania z jednej sekcji do drugiej. Wydaje się jednak, że istnieje ogromna liczba opcji, jeśli chodzi o zgadywanie, który obiekt zawiera prawdziwe X / Y dla przeglądarki.

Które z nich muszę mieć pewność, że IE 6+, FF 2+ i Chrome / Safari działają?

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

Czy są jeszcze jakieś? Kiedy już wiem, gdzie jest okno, mogę ustawić łańcuch zdarzeń, który będzie powoli wywoływał, window.scrollBy(x,y);aż osiągnie pożądany punkt.

Metoda znaleziona przez jQuery (v1.10) to:

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

To jest:

• window.pageXOffsetNajpierw testuje i używa tego, jeśli istnieje.
• W przeciwnym razie używa document.documentElement.scrollLeft.
• Następnie odejmuje, document.documentElement.clientLeftjeśli istnieje.

Odejmowanie document.documentElement.clientLeft/ Topwydaje się być konieczne do poprawienia sytuacji, w których zastosowałeś ramkę (nie dopełnienie lub margines, ale rzeczywistą ramkę) do elementu głównego, a przy tym, być może tylko w niektórych przeglądarkach.

Może prościej;

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

Kredyty: so.dom.js # L492

Używając czystego javascript, możesz użyć Window.scrollX i Window.scrollY

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

Notatki

Właściwość pageXOffset jest aliasem dla właściwości scrollX, a właściwość pageYOffset jest aliasem dla właściwości scrollY:

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

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

}