部份摘錄自阮一峰先生博客:

瀏覽器窗口大小(視窗)

一張網頁的悉數面積，就是它的大小。通常情況下，網頁的大小由內容和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)
        }
    }