無法在 IE11 中基於 scrollY 更新 document.body

Question

我的網站上有以下腳本，旨在當用戶從視口頂部滾動超過 20 像素時更改主體類。

(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 而不是 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/