页面内容过短无滚动时，如何监听鼠标滚轮事件？

当然有办法解决这个问题！你不用再依赖scroll事件——它确实只能捕捉页面滚动的结果，而非滚轮动作本身。我们可以直接监听鼠标滚轮专属事件，不管页面内容能不能滚动，只要用户动了滚轮就能检测到。

1. 优先使用wheel事件（现代浏览器推荐） #

这是W3C标准的滚轮事件，目前所有现代浏览器（Chrome、Firefox、Edge、Safari等）都支持，专门用来捕获鼠标滚轮（包括触摸板滚动）的操作，完全不依赖页面的滚动状态。

举个简单的实现例子：

// 给整个文档绑定滚轮事件
document.addEventListener('wheel', function(event) {
  // 通过deltaY判断滚动方向：正数=向下滚动，负数=向上滚动
  const scrollDirection = event.deltaY > 0 ? '向下' : '向上';
  console.log(`滚轮滚动了，方向：${scrollDirection}`);

  // 如果需要阻止页面默认的滚动行为（比如你要把滚轮转成缩放），可以加这行
  // event.preventDefault();
});

事件对象里的deltaX、deltaY还能帮你获取滚动的幅度，方便你做更精细的控制（比如缩放的快慢）。

2. 兼容旧版浏览器的 fallback 方案 #

如果你的项目需要支持IE这类旧浏览器，可以结合mousewheel和DOMMouseScroll事件做兼容处理：

function handleWheelAction(event) {
  // 统一不同浏览器的滚动方向判断逻辑
  const delta = event.deltaY || event.detail || (-event.wheelDelta);
  const scrollDirection = delta > 0 ? '向下' : '向上';
  console.log(`滚轮滚动了，方向：${scrollDirection}`);
}

// 根据浏览器支持情况绑定对应事件
if ('onwheel' in document) {
  document.addEventListener('wheel', handleWheelAction);
} else if ('onmousewheel' in document) {
  document.addEventListener('mousewheel', handleWheelAction);
} else {
  // 针对早期Firefox的兼容
  document.addEventListener('DOMMouseScroll', handleWheelAction);
}

旧浏览器的事件属性规则不一样：wheelDelta（IE/早期Chrome）向上滚是正数，detail（早期Firefox）向下滚是正数，所以需要做一次统一转换。

总结 #

这些滚轮事件都是直接监听用户的滚轮操作动作，和页面是否能滚动没有关系。你完全可以用它来实现滚轮缩放功能——比如在事件回调里修改元素的transform: scale()属性，就能把滚轮动作转化为缩放效果啦。

内容的提问来源于stack exchange，提问作者brentonstrine