IE8 alternative to window.scrollY?

Question

I am trying to determine how many pixels I have scrolled using window.scrollY . But this is not supported in IE8. What is a safe cross browser alternative?

Answer 1

A browser compatible version for window.scrollY is document.documentElement.scrollTop . For more information on the detailed workaround in IE8 and earlier, see the "Notes" section of this Mozilla documentation snippet.

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

For the link above, check Example 4 for a fully compatible way to get the scroll position (it even takes into account the increase as @adeneo! Is mentioned) with document.documentElement.scrollTop and document.documentElement.scrollLeft ,

Here, try an example for yourself!

Answer 2

If you don’t need to use a lot, just do:

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

Answer 3

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

Answer 4

If you have a good reason for not just using the library to handle such basic functionality, feel free to "don't reinvent the wheel."

Mootools is open source , and you can simply "steal" its implementation, the corresponding fragments:

 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 basis for determining which compatibility mode your current browser has, and then use window.pageYOffset or document.body.scrollTop based on this or even document.html.scrollTop for really old buggy browsers.

Answer 5

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

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

Answer 6

Based on Mozilla and the answers above, I have the functions below to make it easier to get the coordinates:

 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 Mozilla's documentation , as stated in the above lifespan, The pageXOffset property is an alias for scrollX property, so strictly speaking, it is not necessary.

Anyhoo, use:

 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 and works in Chrome, Firefox, Opera, Edge (8-Edge), IE (7-11), IE8 on XP

Answer 7

In angular we use:

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