下面是一个元素的盒模型:
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
可通过传入滚动量自由滚动
评论区