JavaScript获取滚动的窗口X / Y位置

我希望find一种方法来获得当前可视窗口的位置（相对于总页面宽度/高度），所以我可以用它来强制从一个部分滚动到另一个部分。 然而，在猜测哪一个对象拥有浏览器的真正X / Y时，似乎有大量的select。

我需要确定哪些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); 

那是：

• 它首先testingwindow.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

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