JavaScript get window X/Y position for scroll
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>