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位置

回答

相关问题