详解JavaScript中的坐标和距离

一 前言

在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况，但是这些属性和方法众多，全部熟练地记下来并非是一件易事，大多只能现查，耗费不少时间精力，于是便有了整理记录的想法，即加深了印象，又方便随时查阅。

二 window 对象

浏览器里面，window 对象（注意，w为小写）指当前的浏览器窗口。
它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。
摘自《阮一峰 JavaScript 教程》

位置大小属性

window.screenX , window.screenY

只读属性

返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。

window.innerHeight , window.innerWidth

只读属性

返回网页在当前窗口中可见区域的高度和宽度，即「视口」（viewport）的大小（单位像素）。

注意，这两个属性包括滚动条的高度和宽度。

window.outerHeight , window.outerWidth

只读属性

返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。

window.scrollX , window.scrollY

只读属性

别名： window.pageXOffset , window.pageYOffset

分别返回页面的水平滚动距离和垂直滚动距离，单位都是像素。

注意，这两个属性的返回值不是整数，而是双精度浮点数。如果页面没有滚动，它们的值就是0。

摘自《阮一峰 JavaScript 教程》

为了跨浏览器兼容性，请使用 window.pageXOffset 代替 window.scrollX。另外，旧版本的 IE（<9）两个属性都不支持，必须通过其他的非标准属性来解决此问题。

摘自 MDN ：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollX

window 对象的方法

window.scrollTo() , window.scroll() , window.scrollBy()

window.scrollTo 方法 ---> 别名： window.scroll 方法

用于将文档滚动到指定位置。

它接受两个参数，表示滚动后位于窗口左上角的页面坐标。

也可以接受一个配置对象作为参数。

window.scrollTo(options)

配置对象 options 有三个属性。

window.scrollBy 方法用于将网页滚动指定距离（单位像素）。

它接受两个参数：水平向右滚动的像素，垂直向下滚动的像素。

注意：仔细体会这两者的差别。

三 Element 节点