JavaScript mendapatkan posisi X / Y jendela untuk menggulir

Saya berharap menemukan cara untuk mendapatkan posisi jendela yang dapat dilihat saat ini (relatif terhadap total lebar halaman / tinggi) sehingga saya dapat menggunakannya untuk memaksa gulir dari satu bagian ke bagian lain. Namun, tampaknya ada sejumlah besar pilihan ketika menebak objek mana yang memegang X / Y yang sebenarnya untuk browser Anda.

Manakah dari ini yang perlu saya pastikan bahwa IE 6+, FF 2+, dan Chrome / Safari berfungsi?

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

Dan adakah yang lain? Setelah saya tahu di mana jendela itu, saya dapat mengatur rantai peristiwa yang perlahan akan memanggil window.scrollBy(x,y);sampai mencapai titik yang saya inginkan.

Metode jQuery (v1.10) gunakan untuk menemukan ini:

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

Itu adalah:

• Ini menguji untuk window.pageXOffsetpertama dan menggunakannya jika ada.
• Kalau tidak, ia menggunakan document.documentElement.scrollLeft.
• Itu kemudian mengurangi document.documentElement.clientLeftjika ada.

Pengurangan document.documentElement.clientLeft/ Tophanya tampaknya diperlukan untuk memperbaiki situasi di mana Anda telah menerapkan perbatasan (bukan padding atau margin, tetapi perbatasan aktual) ke elemen root, dan pada saat itu, mungkin hanya di browser tertentu.

Mungkin lebih sederhana;

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

Penghargaan: so.dom.js # L492

Menggunakan javascript murni, Anda dapat menggunakan Window.scrollX dan Window.scrollY

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

Catatan

Properti pageXOffset adalah alias untuk properti scrollX, dan Properti pageYOffset adalah alias untuk properti scrollY:

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

Ini demo singkat

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

}