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

Question

Tôi hy vọng sẽ tìm cách để có được vị trí cửa sổ có thể xem hiện tại (tương ứng 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ừ một phần đến khác. Tuy nhiên, dường như có một số lượng lớn các tùy chọn khi nói đến việc đoán đối tượng nào giữ đúng X/Y cho trình duyệt của bạn.

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

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òn cách nào khác không? Một khi tôi biết nơi cửa sổ là tôi có thể thiết lập một chuỗi sự kiện mà từ từ sẽ gọi window.scrollBy(x,y); cho đến khi nó đạt đến điểm mong muốn của tôi.

Answer 1

Phương pháp 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 cho window.pageXOffset đầu tiên và sử dụng rằng nếu nó tồn tại.
• Nếu không, nó sử dụng document.documentElement.scrollLeft.
• Sau đó, nó trừ document.documentElement.clientLeft nếu nó tồn tại.

Các phép trừ của document.documentElement.clientLeft/Top chỉ dường như được yêu cầu để sửa chữa cho những tình huống mà bạn đã áp dụng một biên giới (không đệm hoặc lề, nhưng biên giới thực tế) để các phần tử gốc, và lúc đó, có thể chỉ trong một số trình duyệt.

Answer 2

Có thể đơn giản hơn;

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

Điểm Uy Tín: so.dom.js#L492

Answer 3

Sử dụng javascript tinh khiết 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 pageXOffset là một bí danh cho tài sản scrollX, và tài sản pageYOffset là một bí danh cho tài sản 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>

Answer 4

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

}