用json封裝scroll實現相容獲得scrollTop和scrollLeft
阿新 • • 發佈:2018-11-10
相容重要點:document.compatMode的用法:獲取頁面寬高
在Standards Mode下對於盒模型的解釋和其他的標準瀏覽器是一樣,在Quirks Mode模式下則有很大差別,而在不宣告Doctype的情況下,IE預設又是Quirks Mode。
document.compatMode正好派上用場,它有兩種可能的返回值:BackCompat和CSS1Compat。
- BackCompat:標準相容模式關閉(不遵循w3c標準),瀏覽器客戶區寬度document.body.clientWidth
- CSS1Compat:標準相容模式開啟(遵循w3c標準),瀏覽器客戶區寬度document.documentElement.clientWidth
用json封裝scroll相容(獲取頁面滾動的頭部距離和左部距離):
//呼叫格式為scroll().top function scroll() { if(window.pageXOffset!==null){ return { top:window.pageYOffset, left:window.pageXOffset } }else if(document.compatMode ==="CSS1Compat"){ return { top:document.documentElement.scrollTop, left:document.documentElement.scrollLeft } } return { top:document.body.scrollTop, left:document.body.scrollLeft } } window.onscroll=function () { console.log(scroll().top); } </script>