IE8 Alternative to Window.Scrolly

IE8 alternative to window.scrollY?

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!

vertical document scroll position in JavaScript that is cross-browser compatible up to IE 8

Use the source:

var scrollPosition = window.pageYOffset;

Compatibility notes:

• document.body.scrollTop doesn’t work (is always 0) in Firefox; it’s document.documentElement.scrollTop if you want to use a scrollTop at all. Conversely, document.documentElement.scrollTop is always 0 in Chrome (well, Blink and WebKit).

• window.scrollY doesn’t exist in IE 8 and earlier.

So, for old IE compatibility, use:

var scrollPosition =
    'pageYOffset' in window ?
        window.pageYOffset :
        document.body.scrollTop;

window.innerHeight ie8 alternative

You might want to try:

document.documentElement.clientHeight;

Or can use jQuery's .height() method:

$(window).height();

pageYOffset Scrolling and Animation in IE8

pageYOffset and pageXOffset are not supported in IE8 and before, try this function:

// Return the current scrollbar offsets as the x and y properties of an object
function getScrollOffsets() {

    // This works for all browsers except IE versions 8 and before
    if ( window.pageXOffset != null ) 
       return {
           x: window.pageXOffset, 
           y: window.pageYOffset
       };

    // For browsers in Standards mode
    var doc = window.document;
    if ( document.compatMode === "CSS1Compat" ) {
        return {
            x: doc.documentElement.scrollLeft, 
            y: doc.documentElement.scrollTop
        };
    }

    // For browsers in Quirks mode
    return { 
        x: doc.body.scrollLeft, 
        y: doc.body.scrollTop 
    }; 
}

Alternatives to window.scrollMaxY?

I've got away with document.body.scrollHeight so that

document.body.scrollHeight = window.pageYOffset + screen height in pixels

at the end of the page (on Android).

My scroll handler JavaScript doesn't work in Internet Explorer

Certain properties used in your snippet are not supported by IE.

From the MDN page on scrollY:

For cross-browser compatibility, use window.pageYOffset instead of window.scrollY. Additionally, older versions of Internet Explorer (< 9) do not support either property and must be worked around by checking other non-standard properties.¹

It appears you already have found the check for pageOffset support, so also check if non-standard properties are supported (e.g. CSS1 is compatible):

var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

Try this sample, using addEventListener() instead of onscroll.

var header = document.getElementById('header');
var picturebg = document.getElementsByClassName('picturebg')[0];
var arrow = document.getElementsByClassName('toTop-transparent')[0];
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

header.addEventListener('scroll', function(event) {
  "use strict";
  var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
console.log('y: ',y);
  if (y > 7) {
    header.className = 'header-colored';
    arrow.className = 'toTop';
    picturebg.className = 'picturebgns';
  } else {
    header.className = 'header-transparent';
    arrow.className = 'toTop-transparent';
    picturebg.className = 'picturebg';
  }
});

<div id="header" style="height: 50px; overflow: scroll;">
  <img  class="picturebg" src="https://www.gravatar.com/avatar/684fa9ff80577cbde88ffbdebafac5b4?s=32&d=identicon&r=PG&f=1" />
  <div id="arrow" class="toTop-transparent">↓</div>
  </div>

Getting current page position in IE8 when scrolling

this is from jquery documentation:
"The .offset() method allows us to retrieve the current position of an element RELATIVE TO THE DOCUMENT."
I can't understand why FF or Chrome return $('html').offset().top relative to the client screen/ It seems that IE's approach is more predictable.

Try that (use .scrollTop property of the DOM element instead of .offset().top):

$(document).ready(function(e){
    //alert("subPos: " + subPos);

    //first find the position of the things to sticky
    submenu = $("#sub");
    //submenu.removeClass("no-js");
    subPos = $("#sub").position();
    subPos = subPos.top;

    var preScrollHtml = document.getElementsByTagName('html').item(0).scrollTop;
    var preScrollBody = document.getElementsByTagName('body').item(0).scrollTop;

    var checkPos = function(){
    var scrolledHtml = document.getElementsByTagName('html').item(0).scrollTop;
    var scrolledBody = document.getElementsByTagName('body').item(0).scrollTop;
    if (preScrollHtml !== scrolledHtml) {
    windowPos = scrolledHtml;
    }
    else {
    windowPos = scrolledBody;
        }
    preScrollHtml = scrolledHtml;
        preScrollBody = scrolledBody;
    calculate();
    }

    var calculate = function() {
    subPos = 64;
    if (windowPos >= subPos){
    $("#sub").addClass("fixed");
    $("#minestre").css("marginTop", "50px");
    }
    else if (windowPos < subPos){
    $("#sub").removeClass("fixed");
    $("#minestre").css("marginTop", "0px");
    }
    //Setting text fields to show the values of everything can help in debugging
    $("#windowpos").val(windowPos);
    $("#subp").val(subPos);
    }

//every time the window scrolls, this function is run
    if ($(window).scroll){
        $(window).scroll(checkPos);
    }
    else if(window.onscroll){
        window.onscroll = checkPos;
    }

});

Trigger a function after scrolling x pixels from the top

You are using the wrong property here.

Instead of scrollTop property you need to use the Window.scrollY property.

This is how should be your code:

window.onscroll = function() {
  var scrollLimit = 100;
  if (window.scrollY >= scrollLimit) {
    alert("x")
  }
};

Note:

window.scrollY compatibility issues with IE:

Unfortunately window.scrollY doesn't work with IE browsers, for IE you can use window.pageYOffsetas a replacement, but it always gives hundreds rounded values (100, 200, 300, ...).

Otherwise you can check the accepted answer here it uses document.documentElement.scrollTop as a workaround.

---

Related Topics