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

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

浏览器窗口大小(视窗)

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

你可能感兴趣的:(浏览器,bom,javascript)