JavaScript获取窗口X / Y位置以进行滚动

Question

JavaScript获取窗口X / Y位置以进行滚动

我希望找到一种方法来获取当前可视窗口的位置（相对于总页面宽度/高度），这样我就可以使用它来强制从一个部分滚动到另一个部分。但是，当猜测哪个对象拥有您浏览器的真实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

也许更简单;var top  = window.pageYOffset || document.documentElement.scrollTop,     left = window.pageXOffset || document.documentElement.scrollLeft;致谢：so.dom.js＃L492

Answer 2

使用纯JavaScript您可以使用Window.scrollX和Window.scrollYwindow.addEventListener("scroll",&nbsp;function(event)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;top&nbsp;=&nbsp;this.scrollY, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left&nbsp;=this.scrollX;},&nbsp;false);笔记pageXOffset属性是scrollX属性的别名，pageYOffset属性是scrollY属性的别名：window.pageXOffset&nbsp;==&nbsp;window.scrollX;&nbsp;//&nbsp;always&nbsp;true window.pageYOffset&nbsp;==&nbsp;window.scrollY;&nbsp;//&nbsp;always&nbsp;true这是一个快速演示window.addEventListener("scroll",&nbsp;function(event)&nbsp;{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;top&nbsp;=&nbsp;this.scrollY, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left&nbsp;=&nbsp;this.scrollX; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;horizontalScroll&nbsp;=&nbsp;document.querySelector(".horizontalScroll"), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;verticalScroll&nbsp;=&nbsp;document.querySelector(".verticalScroll"); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;horizontalScroll.innerHTML&nbsp;=&nbsp;"Scroll&nbsp;X:&nbsp;"&nbsp;+&nbsp;left&nbsp;+&nbsp;"px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;verticalScroll.innerHTML&nbsp;=&nbsp;"Scroll&nbsp;Y:&nbsp;"&nbsp;+&nbsp;top&nbsp;+&nbsp;"px"; &nbsp;&nbsp;},&nbsp;false);*{box-sizing:&nbsp;border-box}:root{height:&nbsp;200vh;width:&nbsp;200vw}.wrapper{ &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;fixed; &nbsp;&nbsp;&nbsp;&nbsp;top:20px; &nbsp;&nbsp;&nbsp;&nbsp;left:0px; &nbsp;&nbsp;&nbsp;&nbsp;width:320px; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;black; &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;green; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;64px;}.wrapper&nbsp;div{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;50%; &nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left; &nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;line-height:&nbsp;64px}.horizontalScroll{color:&nbsp;orange}<div&nbsp;class=wrapper> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class=horizontalScroll>Scroll&nbsp;(x,y)&nbsp;to&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class=verticalScroll>see&nbsp;me&nbsp;in&nbsp;action</div></div>