Мой обработчик прокрутки JavaScript не работает в Internet Explorer

Question

У меня есть сценарий на моем сайте, который работает в каждом браузере, кроме Internet Explorer. Может кто-нибудь объяснить, почему это не работает?

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

консоль не дает никаких ошибок, он просто не работает. У меня есть другой скрипт jQuery, который работает отлично.

Я видел другой вопрос здесь о том же, но это никоим образом не помогло.

Answer 1

Некоторые свойства, используемые в вашем фрагменте, не поддерживаются IE.

От MDN page on scrollY:

Для кросс-браузерной совместимости, используйте window.pageYOffset вместо window.scrollY. Кроме того,, более старые версии Internet Explorer (< 9) не поддерживают ни одно свойство, и их нужно обойти, проверяя другие нестандартные свойства. ¹

Похоже, вы уже нашли чек на поддержку pageOffset, так и проверить, если нестандартные свойства поддерживаются (например, CSS1 совместим):

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

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

Попробуйте этот пример, используя addEventListener() вместо 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