本文介绍如何利用 wheel 事件和 event.deltaY 正确识别滚轮滚动方向，实现光标图标在6张图片间上下滚动时分别正向/反向切换，解决单向递增导致无法回退的问题。
本文介绍如何利用 `wheel` 事件和 `event.deltay` 正确识别滚轮滚动方向，实现光标图标在6张图片间上下滚动时分别正向/反向切换，解决单向递增导致无法回退的问题。
在 Web 开发中，仅监听 wheel 事件而不判断滚动方向，会导致逻辑“只进不退”——就像原始代码中 clicked 变量持续递增却从未减小，最终只能单向循环（如 1→2→3→4→5→6→1），无法响应向上滚动（即浏览器默认的“后退”方向）来切换回前一张光标图。
关键在于：event.deltaY 是判断滚动方向的核心依据。其值为负数（如 -100）表示用户向上滚动（视觉上内容向上移动，常对应浏览器历史后退或页面顶部靠近）；为正数（如 +100）则表示向下滚动。我们应据此动态增减计数器，并配合模运算或边界检查实现闭环切换。
以下是优化后的完整实现：
let clicked = 1; // 初始状态设为 1，对应第1张光标图
// 初始化光标
setCursor();
window.addEventListener('wheel', function (event) {
if (event.deltaY < 0) {
// 向上滚动 → 切换到上一张（数值减小）
clicked = clicked > 1 ? clicked - 1 : 6;
} else {
// 向下滚动 → 切换到下一张（数值增大）
clicked = clicked < 6 ? clicked + 1 : 1;
}
setCursor();
});
function setCursor() {
document.body.style.cursor = `url('https://tim-school.com/codepen/mouser/${clicked}.png'), auto`;
}✅ 优势说明：
- 使用
document.body替代getElementsByTagName("body")[0]，更简洁且符合现代 DOM 操作规范； - 将光标设置逻辑封装为
setCursor()，支持初始化调用与事件中复用； - 条件判断清晰分离滚动方向，避免嵌套
if/else if链，提升可读性与可维护性； - 边界处理采用三元运算符，语义明确（如
clicked > 1 ? clicked - 1 : 6表示“减到1就跳回6”）。
⚠️ 注意事项：
- 确保所有光标图片（
1.png至6.png）路径有效且格式支持（推荐.png或.cur）； - 自定义光标在部分浏览器中可能受安全策略限制（如跨域资源需 CORS 头支持），建议将图片托管在同一源下；
- 若需兼容旧版 IE，应改用
mousewheel事件并解析event.wheelDelta（其符号与deltaY相反），但现代项目推荐统一使用标准wheel事件。
该方案不仅解决了“只能向前滚动”的核心问题，还构建了可扩展的双向控制结构——未来如需增加图片数量或绑定其他交互行为（如触发动画、记录操作日志），只需微调 clicked 范围与 setCursor() 内容即可。
