JavaScript nhận vị trí cửa sổ X / Y để cuộn

Tôi hy vọng tìm được cách lấy vị trí của cửa sổ có thể xem hiện tại (so với tổng chiều rộng / chiều cao của trang) để tôi có thể sử dụng nó để buộc cuộn từ phần này sang phần khác. Tuy nhiên, dường như có rất nhiều tùy chọn khi đoán đối tượng nào giữ X / Y thực sự cho trình duyệt của bạn.

Tôi cần phải đảm bảo IE 6+, FF 2+ và Chrome / Safari nào trong số này?

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

Và có ai khác không? Khi tôi biết cửa sổ ở đâu, tôi có thể đặt chuỗi sự kiện sẽ từ từ gọi window.scrollBy(x,y);cho đến khi đạt đến điểm mong muốn.

Phương thức jQuery (v1.10) sử dụng để tìm thấy điều này là:

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

Đó là:

• Nó kiểm tra window.pageXOffsetđầu tiên và sử dụng nó nếu nó tồn tại.
• Nếu không, nó sử dụng document.documentElement.scrollLeft.
• Sau đó nó trừ đi document.documentElement.clientLeftnếu nó tồn tại.

Phép trừ document.documentElement.clientLeft/ Topchỉ xuất hiện là bắt buộc để sửa cho các tình huống khi bạn đã áp dụng đường viền (không phải phần đệm hoặc lề, nhưng đường viền thực tế) cho phần tử gốc, và tại đó, có thể chỉ trong một số trình duyệt nhất định.

Có lẽ đơn giản hơn;

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

Tín dụng: so.dom.js # L492

Sử dụng javascript thuần túy, bạn có thể sử dụng Window.scrollX và Window.scrollY

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

Ghi chú

Thuộc tính pageX Offerset là bí danh cho thuộc tính scrollX và thuộc tính pageY Offerset là bí danh cho thuộc tính scrollY:

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

Đây là một bản demo nhanh

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

}