我的滚动处理程序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不支持您的代码段中使用的某些属性。

从scrollY上的MDN页面 ：

对于跨浏览器兼容性，请使用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