1. 查看滚动条的滚动距离
- 语法: window.pageXOffset / pageYOffset ( X/Y 轴的滚动条 )
- 备注: 距离是首页像素 + 滚动像素
2. 查看滚动条的滚动距离
- 语法: window.innerWidth / innerHeight
3. 查看元素的几何尺寸
- 语法: DOMElement.getBoundingClientRect();
- 备注 1:
该方法返回一个对象, 对象里面有 left, top, right, bottom 等属性,
left 和 top 代表该元素在左上角的 X 和 Y 坐标,
right 和 bottom 代表元素右下角的 X 和 Y 坐标. - 备注 2:
该方法并不是实时的, 若元素后续发生改变但其调用该方法的返回值并不会改变.
4. 查看元素尺寸
- 语法: DOMElement.offsetWidth / offsetHeight
- 备注: 求出来的是元素看起来的尺寸, 不包括外边距
5. 查看元素的位置
- 语法: DOMElement.offsetLeft / offsetTop
- 备注:
对于无定位父级的元素, 返回相对文档的坐标
对于有定位父级的元素, 返回相对于最近的有定位的父级的坐标
获取最近有定位的父级
- 语法: DOMElement.offsetParent
- 备注:
返回最近的有定位的父级, 如果无, 返回 body
body.offsetParent 返回 null
6. 让滚动条滚动
-
方法:
window 上有 3 个方法, 分别是 scroll(), scrollTo() 和 scrollBy() 方法,
三个方法的功能类似, 用法都是传入 x,y 坐标, 让滚动轮滚动到目标位置. -
区别: scrollBy() 会在之前的数据基础上做累加
-
示例:
scroll(0, 500) 与 scrollTo(0, 500)作用一样, 都是滚动到 (0,500) 这个位置
scrollBy(0, 500) 则是在 x 轴滚动 0 个像素, 在 y 轴上滚动 500 个像素的距离.
显然, scrollBy 可以用作连续滚动一定的距离的功能