浏览器窗口大小-网页大小-元素位置

部分摘录自阮一峰老师博客:

浏览器窗口大小(视窗)

一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和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)
        }
    }