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>