javascript - 无法基于IE11中的scrollY更新document.body

我的网站上有以下脚本，该脚本旨在在用户从视口顶部滚动超过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。

我想念什么？

最佳答案

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

如MDN所述，


  pageYOffset属性是scrollY属性的别名：

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

  
  为了实现跨浏览器的兼容性，请使用window.pageYOffset而不是
  window.scrollY。此外，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/

关于javascript - 无法基于IE11中的scrollY更新document.body，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46657838/