javascript - 我的滚动处理程序JavaScript在Internet Explorer中不起作用

我的网站上有一个脚本，该脚本可以在除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脚本。

我在这里看到了关于同一件事的另一个问题，但是它没有任何帮助。

最佳答案

IE不支持您的代码段中使用的某些属性。

从MDN page on scrollY:



似乎您已经找到了对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>

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