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

133

我希望找到一種方法來獲取當前可視窗口的位置（相對於總頁面寬度/高度），以便我可以使用它來強制從一個節滾動到另一個。然而，在猜測哪個對象擁有瀏覽器的真正X/Y時，似乎有大量的選擇。JavaScript獲取滾動的窗口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);，直到達到我想要的位置。

來源

2010-08-12 Xeoncross

196

方法的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減法只似乎需要糾正對於其中已應用邊界（未填充或餘量，但實際邊界）到根元素的情況下，並在該可能僅在某些瀏覽器。

來源

2010-08-12 05:09:33 thomasrutter

托馬斯 - 你是完全正確的。我的錯。刪除了評論。我重新閱讀您的評論，並意識到您的解決方案根本不是Jquery解決方案。道歉。改變了。 – Bangkokian 2015-01-21 12:22:56

它完全停止在Webkit上工作。奇怪的。 – vsync 2015-01-28 15:49:30

現在有效。我認爲他們在webkit中有一個非常短暫的bug，並且他們已經修復了它。我寫了一個完全破解的插件，因爲這個bug和用戶向我報告。非常可怕的基本事情可能會打破 – vsync 2015-02-16 09:40:13

153

也許更簡單;

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

現金so.dom.js#L492

來源

2013-01-17 16:53:44

+11

+1，比接受的還好。 – 2013-07-12 15:15:47

另請參閱https://developer.mozilla.org/en-US/docs/Web/API/window.scrollY – Chop 2014-12-22 09:17:01

完美跨瀏覽器安全！最佳解決方案 – 2015-05-09 07:45:09

使用純JavaScript可以使用Window.scrollX和Window.scrollY

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

注意

的pageXOffset屬性是scrollX屬性的別名，和The 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>

來源

2015-01-25 05:31:05

您鏈接到的頁面顯示「爲了實現跨瀏覽器兼容性，請使用window.pageYOffset而不是window.scrollY 「。 – JeremyWeir 2015-06-11 18:08:40

這對IE不起作用。 IE需要類似'window.pageYOffset'的東西 – hipkiss 2016-06-14 12:21:22

-1

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

}

來源

2015-02-27 22:56:39

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

回答

相關問題