JS封裝自己的scrollTop left
阿新 • • 發佈：2018-11-30
首先，什麼是scroll，scroll就是用來獲得滾動長度的：
scroll也是同理，但是它的寫法有如下規則：
谷歌瀏覽器 和沒有宣告 DTD <DOCTYPE > ：
document.body.scrollTop;
火狐 和其他瀏覽器
document.documentElement.scrollTop;
ie9+ 和 最新瀏覽器 都認識
window.pageXOffset; pageYOffset （scrollTop）
我們呼叫一次，只能獲得當前的滾動長度，不能實時監控，所以就要加一個window事件：
window.onscroll = function() { 頁面滾動語句 }
相容寫法：
var scrollTop = window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop || 0;封裝寫法：
<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>
這樣，scroll().top,scroll().left就各自是相應的長度。