CODEWITHSUNDEEP
javascript
Xeoncross
Xeoncross

Reputation: 57294

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.

Upvotes: 244

Views: 497657

Answers (6)

JAdel
JAdel

Reputation: 1616

Short answer:

document.addEventListener("DOMContentLoaded", function() {
    window.addEventListener('scroll', function(){
        console.log("X-Position: ", window.scrollX)
        console.log("Y-Position: ", window.scrollY) 
    })
})

Note! pageXOffset and pageYOffset is deprecated

Upvotes: 0

thomasrutter
thomasrutter

Reputation: 117401

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.

Update February 2024:

Nowadays, jQuery basically just uses window.pageXOffset and window.pageYOffset without any of the rest.

var left = window.pageXOffset;
var top = window.pageYOffset;

Interestingly, pageXOffset and pageYOffset are non-standard. The standards based equivalent is scrollX and scrollY. But all modern browsers place an alias of those to pageXOffset and pageYOffset for compatibility, and their use in something as important as jQuery signifies they're pretty safe to use into the foreseeable future.

If you don't care about Internet Explorer 11 or earlier (which you probably don't need to at this point), then you can use scrollX and scrollY.

Upvotes: 314

Aashish
Aashish

Reputation: 106

Maybe this has not been mentioned due to this article been 11 years old.

But currently I am using window.scrollY (inside an onscroll event listner and a throttle function) and it works just fine most of the time. And when it doesn't I use intersectionObserver API for similar effect which is also a fairly new feature I guess.

if (window.scrollY > desiredAmount) {
   doThis();
}

Upvotes: 2

Kerem
Kerem

Reputation: 11586

Maybe more simple;

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

Credits: so.dom.js#L492

Upvotes: 237

ali.b.y
ali.b.y

Reputation: 67

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

}

Upvotes: -1

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

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>

Upvotes: 39

Related Questions