My scroll handler JavaScript doesn't work in Internet Explorer

Question

I have a script on my site that works in every browser, except Internet Explorer. Can someone explain why this doesn't work?

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

window.onscroll = function() {
  "use strict";
  var y = window.scrollY;

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

The console doesn't give any errors, it just doesn't work. I have another jQuery script that runs just fine.

I've seen the other question here about the same thing, but it didn't help in any way.

Dhiren

Have you used www.caniuse.com to check the compatibility of functions you're using? – Janitajanith

Well, that snippet doesn't work because you don't have any HTML in it, so document.getElementById() returns null.... – Mc

If you already have jQuery loaded, why not just port this to jQuery? One of the benefits of jQuery is that its methods is tested to work on all modern browsers. – Avan

@Avan this is for a school assignment where jQuery is frowned upon, so I'm using as much pure js as I can :) – Dhiren

I see. I can understand that, but as long as the jQuery library is loaded, albeit for other reasons, it just makes sense using it - the overall amount of JS will be mostly the same, actually probably slightly less, since selectors and names in jQuery is a bit more straight-forward. – Avan

Two big problems. 1) You didn't specify WHICH version of Internet Explorer you tested with. 2) You didn't bother mentioning what it was supposed to do, which I think is hide the header or something. But I think it may be an issue with scrollY in IE. #16619285 – Krefeld

Answer 1

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">&darr;</div>
  </div>

---

¹https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes

Cleistogamy

The window.pageYOffset support worked amazing, thank you!! – Dhiren