JavaScript 獲取滾動的窗口 X/Y 位置

Question

我希望找到一種方法來獲取當前可視窗口的位置（相對於總頁面寬度/高度），這樣我就可以使用它來強制從一個部分滾動到另一個部分。 但是，在猜測哪個對象擁有瀏覽器的真正 X/Y 時，似乎有很多選擇。

我需要其中哪些來確保 IE 6+、FF 2+ 和 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

還有其他人嗎？ 一旦我知道窗口在哪里，我就可以設置一個事件鏈，它會慢慢調用window.scrollBy(x,y); 直到它達到我想要的點。

Answer 1

jQuery (v1.10) 用來找到它的方法是：

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

那是：

• 它首先測試window.pageXOffset並在它存在時使用它。
• 否則，它使用document.documentElement.scrollLeft 。
• 然后它減去document.documentElement.clientLeft （如果存在）。

document.documentElement.clientLeft / Top的減法似乎只需要糾正您已將邊框（不是填充或邊距，而是實際邊框）應用於根元素的情況，並且可能僅在某些瀏覽器中。

Answer 2

也許更簡單；

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

學分： so.dom.js#L492

Answer 3

使用純 javascript，您可以使用Window.scrollX和Window.scrollY

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

筆記

pageXOffset 屬性是 scrollX 屬性的別名， pageYOffset 屬性是 scrollY 屬性的別名：

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

這是一個快速演示

 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

由於這篇文章已有 11 年的歷史，可能沒有提到這一點。

但目前我正在使用 window.scrollY（在 onscroll 事件偵聽器和油門函數內），它在大多數情況下都可以正常工作。 如果不使用intersectionObserver API 來獲得類似的效果，我猜這也是一個相當新的功能。

if (window.scrollY > desiredAmount) {
   doThis();
}

Answer 5

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

}