IE8 alternative to window.scrollY?

Question

I'm trying to determine how many pixels down I've scrolled using window.scrollY. But this isn't supported in IE8. What is the safe, cross-browser alternative?

Solution 1

The cross-browser compatible version for window.scrollY is document.documentElement.scrollTop. Please see the 'Notes' section of this piece of Mozilla documentation for a full, detailed workaround in IE8 and before.

As mentioned here, pageYOffset is another alternative to window.scrollY (note though that this is only IE9+ compatible).

In regard to the link above, check Example 4 for a fully compatible way to get the scroll position (it even accounts for zoom as @adeneo mentioned!) using document.documentElement.scrollTop and document.documentElement.scrollLeft.

Here, try out the example for yourself!

Solution 2

If you don't have to use it a lot, just do:

var scroll = window.scrollY //Modern Way (Chrome, Firefox) 
|| document.documentElement.scrollTop (Old IE, 6,7,8)

Solution 3

If you're using jQuery, I used $(window).scrollTop() to get the Y position in IE 8. It seemed to work.

Solution 4

If you have a valid reason for not just using a library to handle this kind of base functionality, don't hesitate 'not to re-invent the wheel'.

Mootools is open source, and you can just 'steal' its implementation, relevant snippets:

getScroll: function(){
    var win = this.getWindow(), doc = getCompatElement(this);
    return {x: win.pageXOffset || doc.scrollLeft, y: win.pageYOffset || doc.scrollTop};
}

function getCompatElement(element){
    var doc = element.getDocument();
    return (!doc.compatMode || doc.compatMode == 'CSS1Compat') ? doc.html : doc.body;
}

These 2 are the core of deciding which compatibility mode your current browser it has, and then whether to use window.pageYOffset or document.body.scrollTop based on that or even document.html.scrollTop for really ancient buggy browsers.

Solution 5

Based on Niels' answer, I come up with a slightly more compact solution when just the Y coord is needed:

function get_scroll_y() {
    return window.pageYOffset || document.body.scrollTop || document.html.scrollTop;
}

View more solutions

Comments

[Niels Keurentjes]

Use a library like Mootools or jQuery to handle browser abstractions for you if at all possible.

[dsgriffin]

Aren't the cross-browser versions to scrollX and scrollY, document.body.scrollLeft and document.body.scrollTop?

[adeneo]

^^^^^ It's pageYOffset and document.body.scrollTop

[dsgriffin]

@adeneo Is it ok if I link to that article in my answer please?

[adeneo]

@Zenith - Sure, example 4 on that page shows a cross browser way to get the scroll position, even accounting for zoom !

[McX]

document.documentElement.scrollTop gives 0 in Google Chrome 40

[dsgriffin]

@McX This is because of an ongoing Chrome bug that is yet to be resolved (but judging from the replies I've seen, it's in the process of being fixed) - code.google.com/p/chromium/issues/detail?id=157855

[Hacktisch]

January 2016, still not fixed.

[ps2goat]

this works, though I don't think you need the second one (window.pageYOffset). While it works, all older IE browsers support the document.documentElement.scrollTop way of getting the scroll position. Newer IE browsers ("Edge") support window.scrollY, as mentioned in the MDN: developer.mozilla.org/en-US/docs/Web/API/Window/…

[mcheah]

Nov 2016, still not fixed.

[Andre Figueiredo]

that is jQuery's scrollTop anyway..

[Suraj Jain]

April 4 2018, fixed :)