JavaScript get window X/Y position for scroll

Question

I'm hoping to find a way to get the current viewable window's position (relative to the total page width/height) so I can use it to force a scroll from one section to another. However, there seems to be a tremendous amount of options when it comes to guessing which object holds the true X/Y for your browser.

Which of these do I need to make sure IE 6+, FF 2+, and Chrome/Safari work?

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

And are there any others? Once I know where the window is I can set an event chain that will slowly call window.scrollBy(x,y); until it reaches my desired point.

Solution 1

The method jQuery (v1.10) uses to find this is:

var doc = document.documentElement;
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

That is:

• It tests for window.pageXOffset first and uses that if it exists.
• Otherwise, it uses document.documentElement.scrollLeft.
• It then subtracts document.documentElement.clientLeft if it exists.

The subtraction of document.documentElement.clientLeft / Top only appears to be required to correct for situations where you have applied a border (not padding or margin, but actual border) to the root element, and at that, possibly only in certain browsers.

Solution 2

Maybe more simple;

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

Credits: so.dom.js#L492

Solution 3

Using pure javascript you can use Window.scrollX and Window.scrollY

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

Notes

The pageXOffset property is an alias for the scrollX property, and The pageYOffset property is an alias for the scrollY property:

window.pageXOffset == window.scrollX; // always true
window.pageYOffset == window.scrollY; // always true

Here is a quick demo

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>

Comments

[Bangkokian]

Thomas -- you're totally right. My bad. Comments removed. I re-read your comment and realized that your solution wasn't a Jquery solution at all. Apologies. Modded up.

[vsync]

It works now. I think they had a very temporary bug in webkit and they fixed it already. I wrote a plugin the completely broke because of that bug and users reported to me of this. Very scary such basic things might break

[Simon Steinberger]

Perfectly cross browser safe! Best solution.

[JeremyWeir]

The page you linked to says "For cross-browser compatibility, use window.pageYOffset instead of window.scrollY."

[Phil]

Is this the code for $(window).scrollTop(); ? It would probably be useful to include the jQuery method as well in this answer.

[thomasrutter]

The code I posted is a paraphrasing of what became jQuery.fn.offset(). scrollTop() / scrollLeft() do basically the same, but don't subtract clientTop / clientLeft.

[Klaider]

That worked better than the answer code, but... the answer code doesn't worked, not a bit...

[hipkiss]

This doesn't work for IE. IE requires something like window.pageYOffset

[Maxrunner]

What is the method?

[thomasrutter]

As I said above this is from jQuery's jQuery.fn.offset() function, though it is paraphrased rather than copied directly.

[rogerdpack]

Would it be possible to add the jQuery equivalent math? Just for followers use. Thanks!

[thomasrutter]

scrollY has no support in IE and potentially poor support in Edge and Safari

[vsync]

I wonder why not just use document.documentElement.scrollTop which works everywhere.

[thomasrutter]

These days, all of the above are aliases of window.scrollY on all modern browsers, with the exception of MSIE (all versions). As long as MSIE11 is still on the scene window.pageYOffset is probably the best works-anywhere until you can drop MSIE altogether.