我的滾動處理程序JavaScript在Internet Explorer中不起作用

我的網站上有一個腳本，適用於除Internet Explorer之外的每個瀏覽器。有人可以解釋爲什麼這不起作用嗎？我的滾動處理程序JavaScript在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腳本。

我在這裏看到了另外一個關於同一事物的問題，但它沒有任何幫助。

來源

2016-11-30 r4tchet

你用www.caniuse.com檢查您正在使用的功能的兼容性如何？ – Carcigenicate

那麼，這段代碼不起作用，因爲你沒有任何HTML，所以document.getElementById（）返回null .... –

如果你已經加載jQuery，爲什麼不把它移植到jQuery？ jQuery的好處之一是其測試方法可以在所有現代瀏覽器上運行。 – junkfoodjunkie

您的摘錄中使用的某些屬性不受IE的支持。

從MDN page on scrollY：

對於跨瀏覽器兼容性，使用window.pageYOffset代替window.scrollY。此外，舊版本的Internet Explorer（< 9）不支持任一屬性，必須通過檢查其他非標準屬性來解決。 ¹

您似乎已經找到了pageOffset支持的檢查，所以還檢查非標準特性的支持（例如CSS1兼容）：

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

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

試試這個樣本，使用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

來源

2016-11-30 20:30:10

window.pageYOffset支持令人驚歎，謝謝！ – r4tchet

我的滾動處理程序JavaScript在Internet Explorer中不起作用

回答

相關問題