scroll滾動事件在瀏覽器中無效
阿新 • • 發佈：2019-02-17
因為相容性問題
scrollTop: 被捲去的頭部
它就是當你滑動滾輪瀏覽網頁的時候網頁隱藏在螢幕上方的距離
怎麼得到scrollTop
window.onscroll = function() { 頁面滾動語句 }
1.谷歌瀏覽器 和沒有宣告 DTD ：
document.body.scrollTop;
2.火狐 和其他瀏覽器 (就是document.html.scrolltop的意思,只是沒有document.html這樣的寫法而已)
document.documentElement.scrollTop;
ie9+ 和 最新瀏覽器 (都認識scroll)
window.pageXOffset; pageYOffset （scrollTop）
相容性寫法：
window.onscroll = function(){
var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
document.body.scrollTop || 0;
document.title = scrollTop;
}
封裝scrollTop：
<script> // var json = {left: 10, right: 10} 變異 //json.left json.top function scroll() { if(window.pageYOffset != null) // ie9+ 和其他瀏覽器 { return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode == "CSS1Compat") // 宣告的了 DTD // 檢測是不是怪異模式的瀏覽器 -- 就是沒有 宣告<!DOCTYPE html> { return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 剩下的肯定是怪異模式的 left: document.body.scrollLeft, top: document.body.scrollTop } } window.onscroll = function() { console.log(scroll().top); } </script>