瀏覽器窗口大小-網頁大小-元素位置

部分摘錄自阮一峯老師博客:

瀏覽器窗口大小(視窗)

一張網頁的所有面積，就是它的大小。一般狀況下，網頁的大小由內容和CSS樣式表決定。
瀏覽器窗口的大小，則是指在瀏覽器窗口中看到的那部分網頁面積，又叫作viewport（視口）。

注意事項

• 必須在頁面加載完成後才能運行，不然document對象還沒生成，瀏覽器會報錯
• clientWidth和clientHeight都是隻讀屬性，不能對它們賦值。
• window.innerWidth是包括右邊滾動條的寬度的

const getViewport = () =>{
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }

網頁大小

若是網頁內容可以在瀏覽器窗口中所有顯示，不出現滾動條，那麼網頁的clientWidth和scrollWidth應該相等。可是實際上，不一樣瀏覽器有不一樣的處理，這兩個值未必相等。因此，咱們須要取它們之中較大的那個值

const getPageArea = () =>{
        return {
            width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
            height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
         }
    }

網頁元素絕對位置

指該元素的左上角相對於整張網頁左上角的座標。這個絕對位置要經過計算才能獲得。

1. 不斷累加offsetParent的offsetTop和offsetLeft屬性

   因爲在表格和iframe中，offsetParent對象未必等於父容器，因此上面的函數對於表格和iframe中的元素不適用。

   function getElementLeft(element){
          var actualLeft = element.offsetLeft;
          var current = element.offsetParent;
      
          while (current !== null){
              actualLeft += current.offsetLeft;
              current = current.offsetParent;
          }
          return actualLeft;
      }
      function getElementTop(element){
          var actualTop = element.offsetTop;
          var current = element.offsetParent;
      
          while (current !== null){
              actualTop += current.offsetTop;
              current = current.offsetParent;
          }
          return actualTop;
      }

2. 利用getBoundingClientRect方法

   此方法其中包含了left、right、top、bottom四個屬性，分別對應了該元素的左上角和右下角相對於瀏覽器窗口（viewport）左上角的距離.(其實也就是網頁元素的相對位置)

   　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
      
      　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

網頁元素相對位置

網頁元素的相對位置，指該元素左上角相對於瀏覽器窗口左上角的座標。

有了絕對位置之後，得到相對位置就很容易了，只要將絕對座標減去頁面的滾動條滾動的距離就能夠了 也就是減去document.documentElement.scrollLeft|scrollTop

//快捷方法
    var X= this.getBoundingClientRect().left;
    
　　 var Y =this.getBoundingClientRect().top;

滾動位置

返回當前頁面的滾動位置。請使用pageXOffset和pageYOffset， 若是已定義，不然使用scrollLeft和scrollTop。你能夠省略el來使用窗口的默認值。pageXOffset是scrollY的別名(event.pageX是鼠標活動事件的屬性)

const getScrollPosition = (el = window) =>{
        return ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft, y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
    }
      
    // getScrollPosition() -> {x: 0, y: 200}

返回頁面頂部

const scrollToTop = () =>{
        const distance = document.documentElement.scrollTop
        if(distance > 0){
            window.requestAnimationFrame(scrollToTop)
            window.scrollTo(0, distance - distance/8)
        }
    }