当前位置：首页 > news >正文

JavaScript页面事件与滚动

news 来源：原创 2025/5/15 0:00:40

一、页面加载事件与页面滚动事件

一、页面加载事件

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` 等）