window API
浏览器窗口尺寸和滚动位置
API 说明
window 对象提供了浏览器窗口的尺寸和滚动位置信息。
// 窗口尺寸
console.log(window.innerWidth); // 窗口内部宽度
console.log(window.innerHeight); // 窗口内部高度
console.log(window.outerWidth); // 窗口外部宽度（包含边框）
console.log(window.outerHeight); // 窗口外部高度
// 滚动位置
console.log(window.scrollX); // 水平滚动位置
console.log(window.scrollY); // 垂直滚动位置
console.log(window.pageXOffset); // scrollX 的别名
console.log(window.pageYOffset); // scrollY 的别名- innerWidth / innerHeight - 浏览器窗口的内部尺寸（不含边框）
- outerWidth / outerHeight - 浏览器窗口的外部尺寸（含边框）
- scrollX / scrollY - 文档的滚动位置
示例 1：窗口尺寸
实时显示窗口尺寸
窗口尺寸（调整浏览器窗口大小观察变化）
innerWidth:
0px
innerHeight:
0px
outerWidth:
0px
outerHeight:
0px
💡 inner vs outer
innerWidth/Height 是文档可显示区域的尺寸
outerWidth/Height 是整个浏览器窗口的尺寸
响应式设计应该使用 innerWidth
示例 2：滚动位置
监听页面滚动
↓ 向下滚动查看数值变化 ↓
继续滚动...
滚动位置
scrollY:
0px
pageYOffset:
0px
scrollX:
0px
示例 3：响应式监听
监听窗口尺寸变化
调整窗口大小
响应式状态
窗口宽度:
0px
设备类型:
-
// 监听窗口尺寸变化
window.addEventListener('resize', () => {
const width = window.innerWidth;
if (width < 768) {
console.log('移动设备');
} else {
console.log('桌面设备');
}
});示例 4：回到顶部按钮
基于滚动位置显示按钮
↓ 向下滚动查看按钮 ↓
按钮状态
滚动距离:
0px
按钮显示:
否
总结
- window.innerWidth/Height 获取窗口内部尺寸
- window.scrollX/Y 获取文档滚动位置
- resize 事件监听窗口尺寸变化
- scroll 事件监听滚动位置变化
- 响应式设计的基础 API