スクロールハンドラ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から

：

クロスブラウザ互換性のため

、window.pageYOffset代わりにwindow.scrollY使用。 さらに、古いバージョンのInternet Explorer（< 9）はどちらのプロパティもサポートしていないため、他の非標準のプロパティを調べて回避する必要があります。 ¹

あなたがすでにそうも非標準のプロパティがサポートされているかどうかを確認（たとえば、CSS1に互換性がある）、pageOffsetサポートのためのチェックを発見した表示されます。

var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); 

var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop; 

が使用して、このサンプルを試してみてくださいonscrollの代わりにaddEventListener()を入力してください。

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