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 有三个属性。

• top：滚动后页面左上角的垂直坐标，即 y 坐标。
• left：滚动后页面左上角的水平坐标，即 x 坐标。
• behavior：字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为 auto。

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

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

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

三 Element 节点

Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（简称元素节点）。

相关属性

Element.clientHeight，Element.clientWidth

分别返回元素的高度和宽度，始终是整数值。

如果该元素是内联元素（display: inline;），则返回值为 0。

从盒模型的概念上来讲，返回的数值计算包括元素的 content 和 padding ，不包括 border 和 margin 。

如果有滚动条，返回的数值会减去滚动条占据的宽度或高度。（即不包含滚动条在内）

// 浏览器视口高度
document.documentElement.clientHeight

// 网页总高度
document.body.clientHeight

Element.clientLeft，Element.clientTop

分别返回元素的左边框宽度和上边框宽度，没有边框则返回 0。

同样不支持内联元素。

（我没太明白这两个属性有啥作用……）