下面是一个元素的盒模型：

client-

在上面的盒模型中，元素的内部 指的是内容和内边距，并且 不包含滚动条。

• clientWidth: 元素的内部宽度，不计算边框和外边距
  • 只有块级元素才有这个属性，内联元素值为 0
  • 元素可滚动时还需要减去滚动条：pl + width + pr - scrollY.width
  • 单位是 像素，计算时会被四舍五入成整数
  • 只读属性，基本上浏览器都兼容
• clientHeight: ...
• clientTop: 元素上边框宽度（border-t），只读属性
• clientLeft: 元素左边框宽度（border-l）
• 右边框和下边框没有对应属性！

offset-

border-box 模型的宽度。

border-box 模型：元素盒子由内容（以及滚动条）、内边距和边框组成。

相对于client-属性，offset-属性包含了滚动条和边框。

offset-也是一个四舍五入的整数，只读属性，单位是像素。

• offsetWidth = 元素宽 + 竖直滚动条宽 + 水平内边距 + 水平边框
• offsetHeight = 元素高 + 水平滚动条高 + 竖直内边距 + 竖直边框

offsetParent指向最近的包含该元素的定位父级元素，用来计算offsetTop和offsetLeft。

定位元素：position属性不为static的元素

定位父级：从近到远一次查找祖先节点，知道找到第一个position不为static的节点为止，即距当前元素最近的定位父级元素

根据元素自己的定位方式，计算其到定位父级的偏移距离：

• 元素自己为fixed定位，此时因为是相对于视口进行定位，因此没有定位父级：Firefox 返回 body 节点，其它浏览器返回 null
• 元素自身不是fixed定位，说明元素是相对于某个祖先元素进行定位，这个祖先元素就是定位父级
  • 各级父元素的定位都是static，定位父级是 body
  • 存在非static定位的父级元素，定位父级是距该元素最近的定位元素
• body 元素没有定位父级元素

知道了定位父级元素，就可以计算这两个东西了：

• offsetTop：元素的上外边框相对于定位父级的上内边框的偏移量
• offsetLeft：元素的左外边框相对于定位父级的左内边框的偏移量

scroll-

scrollHeight

竖直方向上元素溢出视口时变为可滚动，此时元素的实际内容高度就是scrollHeight，它包含了内容高度、内边距高度。

是一个四舍五入的整数，单位像素。

scrollWidth同理。

scrollTop

元素内容的实际顶部相对于视口顶部的便宜，可能是一个小数。

scrollLeft同理。

浏览器窗口

浏览器界面可以分为下面几部分：

• 顶部工具栏
• 内容浏览区域（视口）

浏览器的窗口状态可能有下面几种：

• 小窗口
• 最大化窗口：视口宽度等于屏幕宽度
• 全屏：视口宽度等于屏幕宽度，视口高度等于屏幕高度

window对象提供了两个东西：

• window.outerWidth & window.outerHeight：浏览器窗口大小
• window.innerWidth & window.innerHeight：浏览器视口大小

在全屏是，浏览器窗口与视口大小相同。

如果网站设计不合理，可能会导致inner-和outer-不相等。

JS 滚动

scrollIntoView

目标节点的父节点是可滚动的，调用此方法会滚动其父节点，是目标节点处于视口顶部位置。

直接父节点不一定是可滚动的，也可能是某个祖先节点可滚动，这在添加滚动事件的时候需要注意。

scrollTo

在可滚动的节点上调用此方法，可滚动到指定位置。

scrollableElement.scrollTo(x: number, y: number)

或者

scrollableElement.scrollTo({
  left: number
  top: number
  behavior?: 'auto' | 'smooth'
})

其它类似方法：scroll, scrollBy。

比较

调用对象不同：

• scrollIntoView是在可滚动节点的子节点上调用的，滚动其父元素
• scrollTo是在可滚动节点上调用的，滚动自己

参数不同：

• scrollIntoView只能滚动父元素将自己置于视口顶部，不能设置偏移
• scrollTo可通过传入滚动量自由滚动