JavaScript视口宽高、元素位置、滚动高度、尺寸属性全面介绍（多图）

侠客有情剑无情
3,025 阅读6分钟

本章将全面学习JavaScript各种位置信息属性和方法。希望自己能写一篇文章，让自己更全面理解和加深记忆这些属性的记忆。

一、window视图位置属性

1.1、window对象获取视口（浏览器窗口）宽高

console.log(window.innerHeight) // 939
console.log(window.outerHeight) // 1050
console.log(window.innerWidth)  // 809
console.log(window.outerWidth)  // 1680
属性名 描述 备注
window.innerHeight 浏览器窗口高度，如果存在水平滚动条，则包括滚动条 只读属性，没有默认值，不支持的浏览器则是undefined
window.innerWidth 浏览器窗口宽度，如果存在垂直滚动条，则包括滚动条 只读属性，没有默认值，不支持的浏览器则是undefined
window.outerWidth 浏览器窗口整个宽度，包括侧边栏，窗口镶边和调正窗口大小的边框 只读属性，没有默认值，不支持的浏览器则是undefined
window.outerHeight 浏览器窗口整个高度，包括窗口标题、工具栏、状态栏等 只读属性，没有默认值，不支持的浏览器则是undefined

注意：IE8及以下版本不支持window.innerHeight和window.innerWidth等属性。 对于不支持window.innerHeight等属性的浏览器中，可以读取documentElement和body的高度。

  • document：代表的是整个文档。
  • document.documentElement：整个文档节点树的根节点，在网页中即html标签。
  • document.body：整个文档DOM节点树里的body节点，网页中即为body标签元素。

1.2、window对象获取整个页面滚动的像素值

属性名 描述 备注 别名
window.pageXOffset 返回文档在水平方向滚动的像素值 只读属性，没有默认值，不支持的浏览器则是undefined pageXOffset是scrollX的别名
window.pageYOffset 返回文档在垂直方向已滚动的像素值 只读属性，没有默认值，不支持的浏览器则是undefined pageYOffset是scrollY的别名 
window.pageXOffset === window.scrollX; // 总是 true
window.pageYOffset === window.scrollY; // 总是 true

1.3、window对象获取浏览器窗口在显示器中的位置

属性名 描述 备注
window.screenX 浏览器窗口在显示器中的水平位置 不支持的浏览器则是undefined
window.screenY 浏览器窗口在显示器中的垂直位置 不支持的浏览器则是undefined
window.screenLeft 浏览器可用空间左边距离屏幕（系统桌面）左边界的距离 不支持的浏览器则是undefined
window.screenTop 浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的距离 不支持的浏览器则是undefined

1.4、Screen对象视图属性：有关显示器（用户屏幕）信息的一些属性

属性名 描述 备注
window.screen.height 显示器屏幕的高度，包括工具栏、状态栏等。
window.screen.width 显示器屏幕的宽度，包括工具栏、状态栏等。
window.screen.availHeight 浏览器窗口在屏幕上可占用的高度。
window.screen.availWidth 浏览器窗口在屏幕上可占用的宽度。
window.screen.colorDepth 表示显示器的颜色深度。
window.screen.pixelDepth 该属性基本上与colorDepth一样。

二、元素视图位置属性

关于元素大小位置等信息的一些属性有三个家族（为了自己好记~）：

  • client家族：clientLeft、clientTop、clientWidth、clientHeight、height、width
  • offset家族：offsetLeft、offsetTop 、offsetWidth、offsetHeight、 offsetParent
  • scroll家族：scrollLeft、scrollTop、scrollWidth 、 scrollHeight

2.1、client家族介绍

属性名 描述 备注
clientLeft 表示内容区域的左上角相对于整个元素左上角水平位置（包括边框和滚动条但是不包含元素的padding或margin） 单纯就是border宽度，返回该方向的border宽度。
clientTop 表示内容区域的左上角相对于整个元素左上角垂直位置（包括边框和滚动条但是不包含元素的padding或margin） 单纯就是border高度，返回该方向的border高度。
clientWidth 表示内容区域的宽度，包括padding大小，但是不包括边框和滚动条。
clientHeight 表示内容区域的高度，包括padding大小，但是不包括边框和滚动条。
height 表示内容区域的高度，不包括padding大小、边框和滚动条。
width 表示内容区域的高度，不包括padding大小、边框和滚动条。

2.2、offset家族介绍

<main style="position: relative" id="main">
  <article>
    <div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
  </article>
</main>
<script>
  alert(example.offsetParent.id); // main
  alert(example.offsetLeft); // 180 (note: a number, not a string "180px")
  alert(example.offsetTop); // 180
</script>
属性名 描述 备注
offsetLeft 相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左偏移值
offsetTop 相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的上偏移值）。

属性名 描述 备注
offsetWidth 整个元素的宽度（包括边框）。
offsetHeight 整个元素的高度（包括边框）。
offsetParent 第一个祖定位元素 offsetParent元素只可能是：<body>、position不是static的元素、<table>, <th> 或<td>但必须要position: static

2.3、scroll家族介绍

属性名 描述 备注
scrollLeft 表示元素滚动的宽度 可读可写
scrollTop 表示元素滚动的高度 可读可写
scrollWidth 表示整个内容区域的宽度，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。
scrollHeight 表示整个内容区域的高度，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。

三、文档视图(DocumentView)和元素视图(ElementView)方法

关于文档和元素视图的方法有一下几种

  • elementFromPoint()
  • getBoundingClientRect()
  • getClientRects()
  • scrollIntoView()

下面会一一介绍这几种方法。

3.1、elementFromPoint()方法介绍

返回给定坐标处所在的元素。

3.2、getBoundingClientRect()方法介绍

得到矩形元素的界线，返回的是一个对象，包含 top, left, right, 和 bottom四个属性值，大小都是相对于文档视图左上角计算而来。

{
   bottom: 252
   height: 92
   left: 704
   right: 976
   top: 160
   width: 272
   x: 704
   y: 160
}

3.3、getClientRects()方法介绍

获取元素占据页面的所有矩形区域。返回元素的数个矩形区域，返回的结果是个对象列表，具有数组特性。这里的矩形选区只针对inline box，因此，只针对a, span, em这类标签元素。

3.4、scrollIntoView()方法介绍

让元素滚动到可视区域。可以实现元素的锚点跳转功能。

四、案例

4.1 下拉列表无限加载实现方案

原理：

/**
 * @param warp {DOM || null} 外层容器，当为null时，默认以整个文档结构为外容器
 * @param threshold  {Number} 滚动阀值，即可以设置一个值，当滚动到离地步还有一段距离时，就开始执行callback
 * @param cb {Function} 回掉函数
 */
let scrollToLoad = (warp, threshold, cb) => {
     let scrollTop = 0,
          warpHeight,
          listHeight,
          _threshold_ = threshold || 0;
     if (!warp) {
         // 获取滚动条当前的位置 
         if (document.documentElement && document.documentElement.scrollTop) { 
            scrollTop = document.documentElement.scrollTop; 
         } else if (document.body) { 
            scrollTop = document.body.scrollTop; 
         } 
         // 获取当前可视范围的高度
         if (document.body.clientHeight && document.documentElement.clientHeight) { 
            warpHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
         } else { 
            warpHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
         } 

         // 获取list完整的高度
         listHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
     } else {
         scrollTop = warp.scrollTop; 
         warpHeight = warp.clientHeight;
         listHeight = warp.scrollHeight;
     }

     if (listHeight <= warpHeight + scrollTop - _threshold_) {
        cb && cb();
     }
}

五、参考链接

avatar
文章
阅读
粉丝