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?

Parkway

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

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

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

@Sailboat Is it ok if I link to that article in my answer please? – Ridiculous

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

Answer 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!

Ridiculous

document.documentElement.scrollTop gives 0 in Google Chrome 40 – Beefburger

@Beefburger 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 – Ridiculous

January 2016, still not fixed. – Chinch

Nov 2016, still not fixed. – Dna

April 4 2018, fixed :) – Incompetence

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

Proficiency

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/… – Slaver

Answer 3

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

Gallegos

Answer 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.

Mulch

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

Cloninger

Answer 6

Based on Mozilla, and answers above, I have a created the functions below to more easily get the coords:

var windowEl = (function () {
    var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
    function scroll() {
        return { left: scrollLeft, top: scrollTop };
    };
    function scrollLeft() {
        return window.scrollX || window.pageXOffset || (isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft);
    };
    function scrollTop() {
        return window.scrollY || window.pageYOffset || (isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop);
    };
    return {
        scroll: scroll,
        scrollLeft: scrollLeft,
        scrollTop: scrollTop
    }
})();

According to the Mozilla documentation, as cited by lifetimes above, the The pageXOffset property is an alias for the scrollX property, so is stictly speaking not necessary.

Anyhoo, usage is:

var scroll = windowEl.scroll();
// use scroll.left for the left scroll offset
// use scroll.top for the top scroll offset

var scrollLeft = windowEl.scrollLeft();
// the left scroll offset

var scrollTop = windowEl.scrollTop();
// the top scroll offset

Tested & works on Chrome, Firefox, Opera, Edge (8-Edge), IE (7-11), IE8 on XP

Pegu

Answer 7

In angular, we use:

  var windowEl = angular.element($window);
  scrolldist = windowEl.scrollTop();

Hines

that is jQuery's scrollTop anyway.. – Sappanwood

Answer 8

window.scrollY & window.scrollX works fine in all modern browers like (Chrome, FireFox & Safari) but does not work in IE so to fix the use window.pageXOffset or window.pageYOffset.

Here is a sample code I wrote to fix ie issue so that the programmatic scrolling works in all browsers including IE

if((window.scrollY || window.pageYOffset) >= 1100){
   //alert('Switch to land');
    $('#landTrst').trigger('click'); // your action goes here
}else if ((window.scrollY || window.pageYOffset) <= 900) {   
    //alert('Switch to Refernce Letter');
     $('#resLet').trigger('click'); // your action goes here
}                            

Karlene