本章将全面学习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();
     }
}

五、参考链接