JavaScript kaydırma için pencere X / Y konumu

Geçerli görüntülenebilir pencerenin konumunu (toplam sayfa genişliği / yüksekliğine göre) almanın bir yolunu bulmayı umuyorum, bu yüzden bir bölümden diğerine kaydırma zorlamak için kullanabilirsiniz. Bununla birlikte, hangi nesnenin tarayıcınız için gerçek X / Y'yi tuttuğunu tahmin etme konusunda muazzam miktarda seçenek var gibi görünüyor.

IE 6+, FF 2+ ve Chrome / Safari'nin çalıştığından emin olmak için aşağıdakilerden hangisine ihtiyacım var?

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

Ve başkaları var mı? Pencerenin nerede olduğunu öğrendikten sonra, window.scrollBy(x,y);istenen noktama ulaşana kadar yavaşça çağıracak bir olay zinciri ayarlayabilirim .

JQuery (v1.10) yöntemi bunu bulmak için kullanır:

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

Yani:

• İlk window.pageXOffsetönce test eder ve varsa kullanır.
• Aksi takdirde kullanır document.documentElement.scrollLeft.
• Daha sonra document.documentElement.clientLeftvarsa çıkarır .

Kök öğeye bir kenarlık (dolgu veya kenar boşluğu değil, gerçek kenarlık) uyguladığınız ve muhtemelen yalnızca belirli tarayıcılarda uyguladığınız durumların düzeltilmesi document.documentElement.clientLeft/ çıkarılması Topgerektiği görülmektedir.

Belki daha basit;

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

Kredi: so.dom.js # L492

Saf javascript kullanarak Window.scrollX ve Window.scrollY'yi kullanabilirsiniz.

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

notlar

PageXOffset özelliği, scrollX özelliği için bir diğer addır ve pageYOffset özelliği, scrollY özelliği için bir diğer addır:

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

İşte hızlı bir 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);

}