企业官网建设流程全解析

getBoundingClientRect()是 JavaScript 中一个非常重要的DOM API，用于获取元素在视口（viewport）中的位置和尺寸信息。

const rect = element.getBoundingClientRect();

返回一个DOMRect对象，包含以下只读属性（单位：像素）：

💡 注意：x和left是等价的，y和top也是等价的（现代浏览器支持x/y）。

🖼️ 图示说明

视口顶部 │ │ top (y) │ ↓ ├───────────────┐ ← left (x) │ │ │ 元素 │ → right │ │ └───────────────┘ │ │ bottom ↓ 视口底部

假设你有一个很长的网页，其中有一个按钮：

<!-- 页面顶部 --> <h1>欢迎来到我的网站</h1> <!-- 中间有很多内容（比如 2000px 高的空白） --> <div style="height: 2000px; background: #eee;"></div> <!-- 目标按钮：距离页面顶部 2100px --> <button id="myBtn">点击我</button>

• 按钮在整个页面中的绝对位置是：top = 2100px（从页面最顶端算起）
• 浏览器窗口高度是：800px

情况一：页面没有滚动（刚打开时）

• 你看到的是页面顶部（<h1>）
• 按钮在屏幕下方很远，甚至看不见
• 此时调用：

const btn = document.getElementById('myBtn'); console.log(btn.getBoundingClientRect().top); // 输出：2100

✅ 因为视口顶部就是页面顶部，所以top = 2100（按钮在视口下方 2100px）

情况二：你向下滚动了 1500px

• 现在你看到的是页面中间部分
• 按钮离你更近了，可能已经出现在屏幕中
• 此时再调用：

console.log(btn.getBoundingClientRect().top); // 输出：600

❓ 为什么变成600？

因为：

• 按钮在页面中的绝对位置还是2100px
• 但你已经向下滚动了 1500px，所以视口的“顶部”现在对应的是页面的1500px处
• 所以按钮到当前视口顶部的距离 =2100 - 1500 = 600px

✅getBoundingClientRect().top始终告诉你：“这个元素现在离你眼前屏幕顶部有多远”

关键结论

• getBoundingClientRect()的坐标系原点是当前可见屏幕的左上角（视口），不是整个网页的左上角。
• 它自动排除了滚动的影响，直接告诉你“元素现在在屏幕什么位置”。
• 如果你想得到在整个页面中的绝对位置，需要手动加上滚动偏移：

js

编辑

const rect = el.getBoundingClientRect(); const absoluteTop = rect.top + window.scrollY; const absoluteLeft = rect.left + window.scrollX;