通过监听 wheel 事件并调用 event.preventDefault()，可在不引起页面滚动的前提下精准获取用户滚轮偏移量（deltaY），适用于颜色选择器等需将滚动映射为参数调节的交互场景。
通过监听 `wheel` 事件并调用 `event.preventdefault()`，可在不引起页面滚动的前提下精准获取用户滚轮偏移量（`deltay`），适用于颜色选择器等需将滚动映射为参数调节的交互场景。
在构建全屏色盘（如 HSL 色彩空间可视化工具）时，UI 空间往往极为有限——你可能已将整个视口用于显示色相（H）与明度（L）的二维渐变，而饱和度（S）缺乏独立控件区域。此时，将鼠标滚轮作为“隐式滑块”是优雅且符合直觉的解决方案：用户滚动即调节饱和度，页面本身却保持静止、无跳动、无滚动条干扰。
实现的关键在于拦截原生滚动行为，而非依赖 scroll 事件或监听 window.scrollY。wheel 事件在滚轮触发瞬间同步派发，event.deltaY 提供标准化的垂直滚动增量（正值表示向下滚动，负值表示向上），且不受浏览器默认滚动影响。
以下为可直接集成到你现有 HTML 中的完整实践方案：
<!-- 在 body 标签内添加一个不可见但可监听的滚动容器 --> <div id="wheel-capture" style="position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;pointer-events:none;"></div>
// 在 script2.js 或内联 <script> 中添加：
const wheelCapture = document.getElementById('wheel-capture');
let saturation = 50; // 初始饱和度，范围 0–100
wheelCapture.addEventListener('wheel', (e) => {
e.preventDefault(); // ✅ 关键：阻止默认滚动行为
// 将 deltaY 映射为饱和度变化（可调灵敏度）
const delta = e.deltaY;
saturation = Math.max(0, Math.min(100, saturation - delta * 0.1)); // 每单位 deltaY 变化 0.1
// 更新 UI 和颜色计算逻辑（示例）
updateColorDisplay(saturation);
});
// 示例：更新显示与颜色模型计算
function updateColorDisplay(s) {
const hue = /* 从鼠标 Y 坐标计算 */;
const lightness = /* 从鼠标 X 坐标计算 */;
const hslColor = `hsl(${hue}, ${s}%, ${lightness}%)`;
document.getElementById('hsl').textContent = `hsl: ${hue}, ${s}%, ${lightness}%`;
document.querySelector('input[type="color"]').value = hslToHex(hue, s, lightness);
// 同步更新 SVG 光标或背景色等...
}
// 辅助函数：HSL → HEX（需自行实现或使用标准转换）
function hslToHex(h, s, l) {
s /= 100; l /= 100;
const c = (1 - Math.abs(2 * l - 1)) * s;
const x = c * (1 - Math.abs((h / 60) % 2 - 1));
const m = l - c/2;
let r, g, b;
if (0 <= h && h < 60) [r,g,b] = [c,x,0];
else if (60 <= h && h < 120) [r,g,b] = [x,c,0];
else if (120 <= h && h < 180) [r,g,b] = [0,c,x];
else if (180 <= h && h < 240) [r,g,b] = [0,x,c];
else if (240 <= h && h < 300) [r,g,b] = [x,0,c];
else [r,g,b] = [c,0,x];
return `#${Math.round((r+m)*255).toString(16).padStart(2,'0')}${Math.round((g+m)*255).toString(16).padStart(2,'0')}${Math.round((b+m)*255).toString(16).padStart(2,'0')}`;
}✅ 注意事项：
- 不要将 wheel 监听器绑定在 body 或 document 上并调用 preventDefault() —— 这会全局禁用所有滚动，破坏可访问性；
- 推荐使用一个极小、固定定位、无交互的占位元素（如上述 #wheel-capture）来捕获事件，避免干扰主内容流；
- deltaY 数值因设备而异（触控板通常更细腻，鼠标滚轮更离散），建议引入累加+平滑衰减或阈值过滤，防止微小抖动误触发；
- 若需支持水平滚动（如 Shift+滚轮），可同时读取 event.deltaX 并映射至其他参数（如色相偏移）；
- 务必在无障碍设计中提供替代操作方式（如键盘 +/- 键或焦点控件），确保 WCAG 合规。
此方案轻量、高效、无侵入性，完美契合你“全页即色盘”的设计理念——让每一次滚动都成为精准调色的自然延伸。
