DOM 元素尺寸和位置 API

offset* 属性

offsetWidth、offsetHeight、offsetTop、offsetLeft - 元素的布局尺寸和相对于 offsetParent 的位置

入门 5 个演示

client* 属性

clientWidth、clientHeight、clientTop、clientLeft - 元素的可见区域尺寸（不含滚动条）

入门 4 个演示

scroll* 属性

scrollWidth、scrollHeight、scrollLeft、scrollTop - 元素的内容尺寸和滚动位置

入门 5 个演示

offsetParent

查找元素的定位父级元素，理解定位上下文和层级关系

入门 4 个演示

getBoundingClientRect()

获取元素相对于视口的位置和尺寸信息 - 最常用的定位 API

中级 6 个演示

getClientRects()

获取元素的所有矩形区域 - 适用于多行文本和复杂布局

中级 3 个演示

scrollIntoView()

滚动元素到可见区域，支持平滑滚动和对齐控制

中级 5 个演示

window API

innerWidth、innerHeight、scrollX、scrollY - 浏览器窗口尺寸和滚动位置

入门 4 个演示

document 滚动兼容

documentElement.scrollTop 等属性的浏览器兼容性处理

中级 3 个演示

ResizeObserver

高效监听元素尺寸变化的现代 API，替代 resize 事件

中级 4 个演示

IntersectionObserver

异步检测元素是否进入视口 - 懒加载、无限滚动等场景的首选

中级 5 个演示

拖拽元素

结合鼠标事件和位置 API 实现可拖拽元素

高级 1 个案例

元素吸附对齐

实现拖拽时的磁吸效果和对齐辅助线

高级 1 个案例

工具提示定位

智能定位工具提示，防止超出视口边界

高级 1 个案例

下拉菜单定位

计算下拉菜单的最佳位置，处理边界情况

高级 1 个案例

模态框居中

实现水平和垂直居中的模态框

中级 1 个案例

滚动进度条

结合滚动 API 实现阅读进度指示器

中级 1 个案例