JavaScript get window X/Y position for scroll

Javascript

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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 - Javascript

Maybe more simple;

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

Credits: so.dom.js#L492

Solution 3 - Javascript

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>

Solution 4 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionXeoncrossView Question on Stackoverflow
Solution 1 - JavascriptthomasrutterView Answer on Stackoverflow
Solution 2 - JavascriptK-GunView Answer on Stackoverflow
Solution 3 - JavascriptGildas.TamboView Answer on Stackoverflow
Solution 4 - Javascriptali.b.yView Answer on Stackoverflow