目录
一、页面加载事件与页面滚动事件
一、页面加载事件
1.1 主要加载事件类型
1.2 代码示例
1.3 注意事项
二、页面滚动事件
2.1 滚动事件基本使用
监听窗口滚动
监听元素滚动
2.2 获取滚动位置
二、scroll 家族
一、scroll 家族核心属性
1. scrollTop 与 scrollLeft
2. scrollWidth 与 scrollHeight
3. window.scrollX 与 window.scrollY
二、文档滚动距离
1. 为何使用 document.documentElement？
2. 现代浏览器推荐方式
三、控制滚动的方法
1. scrollTo()
2. scrollBy()
3. scrollIntoView()
四、实际应用场景
1. 返回顶部按钮
2. 无限滚动加载
3. 横向滚动导航
五、注意事项与优化
六、总结
三、鼠标事件对象 e.pageX/Y
一、e.pageX/Y 的核心特性
1. 坐标基准点
2. 与 clientX/Y 的区别
3. 与 screenX/Y 的区别
二、总结
一、页面加载事件与页面滚动事件
一、页面加载事件
页面加载事件用于在文档或资源加载完成后执行代码，确保操作在正确时机触发。
1.1 主要加载事件类型
| 事件名称 | 触发时机 | 应用场景 |
|---|---|---|
DOMContentLoaded | HTML 文档完全加载并解析完成（无需等待样式表、图片等资源） | 尽早操作 DOM 元素（如绑定事件、初始化组件） |
load | 页面所有资源（图片、脚本、CSS 等）加载完毕 | 需要依赖完整资源的操作（如图像尺寸计算、第三方库初始化） |
beforeunload | 页面即将关闭或刷新前触发（可取消默认行为） | 提示用户保存未提交数据或确认离开 |
unload | 页面卸载时触发（资源已释放，部分浏览器限制操作） | 清理计时器、断开连接等 |
1.2 代码示例
// DOM 解析完成后触发（推荐用于初始化）
document.addEventListener('DOMContentLoaded', () => {console.log('DOM 已就绪！');
});// 页面所有资源加载完成后触发
window.addEventListener('load', () => {console.log('页面完全加载！');
});// 页面关闭前提示用户保存
window.addEventListener('beforeunload', (event) => {event.preventDefault(); // 必需event.returnValue = '确定离开吗？未保存的数据将丢失。'; // 兼容旧浏览器return '确定离开吗？'; // 现代浏览器显示此提示
});// 页面卸载时清理资源（慎用，部分浏览器限制）
window.addEventListener('unload', () => {clearInterval(timer); // 清理计时器
});1.3 注意事项
-
执行顺序：
DOMContentLoaded→load→beforeunload→unload。 -
异步脚本：
DOMContentLoaded不等待async或动态加载的脚本。 -
性能优化：避免在
load事件中执行耗时操作，以免阻塞页面渲染。
二、页面滚动事件
页面滚动事件（scroll）用于监听窗口或元素的滚动行为，常用于实现懒加载、动态导航栏等交互。
2.1 滚动事件基本使用
监听窗口滚动
window.addEventListener('scroll', () => {console.log('页面滚动了！');
});监听元素滚动
const scrollableDiv = document.querySelector('.scroll-container');
scrollableDiv.addEventListener('scroll', (event) => {console.log('元素内部滚动:', event.target.scrollTop);
});2.2 获取滚动位置
| 属性/方法 | 说明 |
|---|---|
window.scrollY | 文档垂直滚动距离（等同于 window.pageYOffset，推荐使用） |
window.scrollX | 文档水平滚动距离（等同于 window.pageXOffset） |
element.scrollTop | 元素内容垂直滚动距离（从顶部开始计算） |
element.scrollLeft | 元素内容水平滚动距离（从左侧开始计算） |
二、scroll 家族
一、scroll 家族核心属性
1. scrollTop 与 scrollLeft
-
作用：获取或设置元素内容的垂直/水平滚动距离（从左上角开始计算）。
-
适用对象：可滚动元素（如
<div>、<body>、documentElement）或窗口。 -
可写性：是，直接赋值可控制滚动位置。
示例：
// 获取文档垂直滚动距离（兼容写法）
const scrollY = document.documentElement.scrollTop || document.body.scrollTop;// 设置滚动到页面顶部
document.documentElement.scrollTop = 0;2. scrollWidth 与 scrollHeight
-
作用：获取元素内容的完整尺寸（包括被滚动隐藏的部分）。
-
只读属性：不可直接修改。
-
与
clientWidth/clientHeight的区别：-
scrollWidth/Height= 内容总宽度/高度（含溢出部分）。 -
clientWidth/Height= 可视区域宽度/高度（不含滚动条）。
-
示例：
const element = document.querySelector('.scroll-container');
console.log('内容总高度:', element.scrollHeight);3. window.scrollX 与 window.scrollY
-
作用：获取文档的水平/垂直滚动距离（现代浏览器推荐使用）。
-
特点：
-
只读属性，不可直接赋值。
-
兼容性：IE 9+，等同于
pageXOffset/pageYOffset。
-
示例：
// 获取文档滚动位置
console.log('水平滚动:', window.scrollX, '垂直滚动:', window.scrollY);// 滚动到指定位置（需使用 scrollTo）
window.scrollTo(window.scrollX, 500);二、文档滚动距离
1. 为何使用 document.documentElement？
-
标准模式（Standard Mode）：
-
document.documentElement指向<html>元素。 -
页面滚动距离通过
<html>元素的scrollTop获取。
-
-
怪异模式（Quirks Mode）：
-
使用
document.body.scrollTop获取滚动距离。
-
-
兼容性写法：
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
2. 现代浏览器推荐方式
-
优先使用
window.scrollY（等同于window.pageYOffset）：const scrollY = window.scrollY; // 更简洁，无需兼容判断
三、控制滚动的方法
1. scrollTo()
-
作用：滚动到文档或元素的指定位置。
-
参数：
-
x：水平坐标。 -
y：垂直坐标。 -
或传递配置对象（支持平滑滚动）。
-
示例：
// 滚动到页面顶部（瞬间）
window.scrollTo(0, 0);// 平滑滚动到页面底部
window.scrollTo({top: document.documentElement.scrollHeight,behavior: 'smooth'
});2. scrollBy()
-
作用：相对于当前位置滚动指定的距离。
-
参数：与
scrollTo()类似。
示例：
// 向下滚动 200px
window.scrollBy(0, 200);// 平滑向右滚动 100px
window.scrollBy({left: 100,behavior: 'smooth'
});3. scrollIntoView()
-
作用：让元素滚动到视口内。
-
参数：配置对象（对齐方式与平滑滚动）。
示例：
document.querySelector('#target').scrollIntoView({behavior: 'smooth',block: 'start' // 对齐到视口顶部
});四、实际应用场景
1. 返回顶部按钮
const backToTopButton = document.querySelector('#back-to-top');// 显示/隐藏按钮
window.addEventListener('scroll', () => {backToTopButton.style.display = window.scrollY > 500 ? 'block' : 'none';
});// 点击按钮平滑滚动到顶部
backToTopButton.addEventListener('click', () => {window.scrollTo({ top: 0, behavior: 'smooth' });
});2. 无限滚动加载
window.addEventListener('scroll', () => {const { scrollTop, scrollHeight, clientHeight } = document.documentElement;// 距离底部 200px 时加载数据if (scrollTop + clientHeight >= scrollHeight - 200) {loadMoreData();}
});3. 横向滚动导航
const scrollContainer = document.querySelector('.horizontal-scroll');// 监听横向滚动
scrollContainer.addEventListener('scroll', () => {console.log('横向滚动距离:', scrollContainer.scrollLeft);
});// 向右滚动 500px
scrollContainer.scrollBy({ left: 500, behavior: 'smooth' });五、注意事项与优化
-
性能问题：
-
scroll事件触发频率极高，需结合 节流（throttle） 或 防抖（debounce） 优化。
window.addEventListener('scroll', throttle(() => {console.log('滚动位置:', window.scrollY); }, 100)); -
-
平滑滚动兼容性：
-
behavior: 'smooth'在 IE 和部分旧版浏览器中不支持，可通过 CSS 或 Polyfill 实现：
html {scroll-behavior: smooth; /* 全局启用平滑滚动 */ } -
-
隐藏元素的尺寸：
-
若元素为
display: none，其scrollHeight和scrollWidth为0。
-
-
滚动条影响：
-
滚动条的存在会减少
clientWidth/clientHeight的值，需注意布局计算。
-
六、总结
| 属性/方法 | 用途 | 适用场景 |
|---|---|---|
scrollTop/scrollLeft | 获取/设置元素滚动距离 | 自定义滚动控制 |
scrollWidth/scrollHeight | 获取元素内容总尺寸（含溢出部分） | 判断是否可滚动或加载更多数据 |
window.scrollY/scrollX | 获取文档滚动距离（推荐替代 document.documentElement.scrollTop） | 页面滚动位置监听 |
scrollTo()/scrollBy() | 控制滚动位置（支持平滑滚动） | 导航到指定位置或动画效果 |
三、鼠标事件对象 e.pageX/Y
一、e.pageX/Y 的核心特性
1. 坐标基准点
-
基准点：以整个文档（包括滚动区域）的左上角为原点
(0, 0)。 -
滚动影响：若页面发生滚动（垂直或水平），
e.pageX/Y的值会包含滚动偏移量。
2. 与 clientX/Y 的区别
-
clientX/Y：
相对于 浏览器视口（viewport）左上角 的坐标，不包含滚动偏移量。 -
关系公式：
e.pageX = e.clientX + window.scrollX; // 水平方向 e.pageY = e.clientY + window.scrollY; // 垂直方向
3. 与 screenX/Y 的区别
-
screenX/Y：
相对于 用户屏幕（显示器）左上角 的坐标，与页面无关。 -
示例：
若浏览器窗口位于屏幕左上角，screenX/Y和clientX/Y值相同；若窗口移动，screenX/Y会变化。
二、总结
| 属性/方法 | 说明 |
|---|---|
e.pageX/Y | 鼠标相对于文档左上角的坐标（含滚动偏移） |
e.clientX/Y | 鼠标相对于视口左上角的坐标（不含滚动偏移） |
e.screenX/Y | 鼠标相对于屏幕左上角的坐标 |
window.scrollX/Y | 文档当前水平/垂直滚动距离（等同于 pageXOffset/pageYOffset） |
element.getBoundingClientRect() | 获取元素相对于视口的位置（含 left, top, width, height 等） |
![[C#] Winform - 进程间通信（SendMessage篇）](http://pic.xiahunao.cn/nshx/[C#] Winform - 进程间通信（SendMessage篇）)
