本文介绍如何利用 wheel 事件和 event.deltaY 正确识别滚动方向，动态切换6种不同PNG格式的自定义光标，支持向上滚动（前进）与向下滚动（后退）双向循环切换。
本文介绍如何利用 `wheel` 事件和 `event.deltay` 正确识别滚动方向，动态切换6种不同png格式的自定义光标，支持向上滚动（前进）与向下滚动（后退）双向循环切换。
在网页开发中，仅监听 wheel 事件而不区分滚动方向，会导致光标状态“单向递进”——即无论向上还是向下滚动，都执行同一套递增逻辑，失去交互直观性。核心问题在于：原始代码使用了无方向感知的全局计数器 clicked，未结合浏览器原生提供的滚动向量信息。
解决的关键是利用 event.deltaY：它是一个有符号数值，在大多数现代浏览器中，向上滚动（页面内容向上移动，用户期望“前进”）时 deltaY ；向下滚动（页面内容向下移动，用户期望“后退”）时 <code>deltaY > 0。据此可精准控制计数器增减：
let clicked = 1; // 初始值设为1，对应第1张光标图
// 初始化光标
setCursor();
window.addEventListener('wheel', function (event) {
if (event.deltaY 6) clicked = 1;
}
setCursor();
});
function setCursor() {
document.body.style.cursor = `url('https://tim-school.com/codepen/mouser/${clicked}.png'), auto`;
}
✅ 注意事项：
- 使用
document.body替代document.getElementsByTagName("body")[0]更简洁可靠； -
deltaY的正负含义与滚动方向一致（非与视觉位移相反），无需取反； - CSS 中保持
overflow: hidden不影响事件触发，但需确保目标元素可接收滚轮事件（如.box占满视口且无pointer-events: none）； - 图片路径需确保全部可访问，建议添加加载失败兜底（例如
cursor: default）； - 若需兼容旧版 IE，应降级使用
mousewheel事件及event.wheelDelta（其符号逻辑相反：wheelDelta > 0表示向上滚动）。
该方案结构清晰、状态可控，将方向判断、边界处理与样式更新解耦，既提升可维护性，也确保了跨设备（触控板/鼠标）滚动行为的一致响应。
