本文介绍如何利用 wheel 事件和 event.deltaY 值精准判断滚动方向，实现6张自定义光标图片（1.png–6.png）的前后循环切换，解决单向递增、无法回退的问题。
本文介绍如何利用 `wheel` 事件和 `event.deltay` 值精准判断滚动方向，实现6张自定义光标图片（1.png–6.png）的前后循环切换，解决单向递增、无法回退的问题。
在网页交互开发中，常需根据用户输入动态改变光标样式以增强视觉反馈。原始代码使用全局计数器 clicked 配合 wheel 事件，但仅依赖固定顺序递增，未区分滚轮向上（scroll up）与向下（scroll down）动作，导致光标始终“向前”切换（1→2→3→…→6→1），无法实现自然的双向导航效果。
关键在于理解 wheel 事件对象的 deltaY 属性：
- 当用户向上滚动（即希望“后退”或“返回”）时，
event.deltaY （典型值如 -100）； - 当用户向下滚动（即“前进”）时，
event.deltaY > 0（典型值如 100）。
据此，我们可将 clicked 设为 1–6 的循环变量，并在每次滚动时按方向增减，越界时自动折返：
let clicked = 1; // 初始状态设为第1张光标
// 初始化光标
setCursor();
window.addEventListener('wheel', function (event) {
if (event.deltaY < 0) {
// 向上滚动 → 后退：1→6, 2→1, ..., 6→5
clicked = clicked > 1 ? clicked - 1 : 6;
} else {
// 向下滚动 → 前进：1→2, 2→3, ..., 6→1
clicked = clicked < 6 ? clicked + 1 : 1;
}
setCursor();
});
function setCursor() {
document.body.style.cursor = `url('https://tim-school.com/codepen/mouser/${clicked}.png'), auto`;
}✅ 优势说明：
- 逻辑清晰：
deltaY直接映射滚动意图，无需额外状态标记； - 边界健壮：使用三元运算符替代
if/else if链，避免多层嵌套，提升可读性与可维护性； - 即时生效：首次加载即调用
setCursor()，确保页面打开时已有正确光标； - 兼容性强：
wheel事件为现代浏览器标准，deltaY在 Chrome/Firefox/Safari/Edge 中行为一致。
⚠️ 注意事项：
- 自定义光标 URL 必须满足 CORS 要求（示例链接需确保可跨域访问），否则光标回退至默认样式；
- 若需支持触摸板惯性滚动等高频事件，可添加防抖（如
requestAnimationFrame节流），但本例中简单切换无性能压力； -
document.body可替换为更精确的目标元素（如document.querySelector('.box')），以限定光标作用范围。
通过这一改进，用户向上滚轮即可“倒带”切换光标，向下滚轮则“快进”，真正实现符合直觉的双向交互体验。
