无法在 IE11 中基于 scrollY 更新文档正文

Question

我的网站上有以下脚本，旨在当用户从视口顶部滚动超过 20px 时更改正文类。

(function ($) {
/// Make nav opaque on scroll
     window.addEventListener('scroll', function () {
      document.body.classList[
         window.scrollY > 20 ? 'add': 'remove'
      ]('scrolled');
     });
})(jQuery);

它在Chrome，Safari和Firefox上完美运行，但在IE11上则不然。

我错过了什么？

Answer 1

根据MDN的说法，IE11不支持window.scrollY。相反，您可以使用 window.pageYOffset ，这是 window.scrollY 的别名。

正如MDN上提到的，

pageYOffset 属性是 scrollY 属性的别名：

window.pageYOffset == window.scrollY; // always true

为了跨浏览器兼容，请使用 window.pageYOffset 而不是 此外，旧版本的Internet Explorer（< 9）不支持任何一种属性，必须通过 检查其他非标准属性。一个完全兼容的例子：

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

在您的情况下，如果您打算支持 IE 11，您可以直接将 scrollY 替换为 pageYOffset：

document.body.classList[
     window.pageYOffset > 20 ? 'add': 'remove'
  ]('scrolled');
});

这是一个工作小提琴：https://jsfiddle.net/wg3nj06h/2/