我的滚动处理程序 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：

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.¹

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

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

My scroll handler JavaScript doesn't work in Internet Explorer

html

javascript

explorer

onscroll