DOM中scroll事件可用属性查询及滚动方向判断求助

问题背景 #

• MDN的scroll事件文档未列出该事件对象的可用属性，但wheel事件文档明确标注了事件对象的相关属性（如可用于判断滚动方向的deltaY）
• 需求是从scroll事件对象中获取滚动方向（类似wheel事件用deltaY判断上下滚动的方式），但在Firefox和Chrome的开发者工具中无法找到scroll事件对象的对应属性，查阅HTML规范也无相关说明，寻求解决方法。

wheel事件属性文档示例 #

解决方案 #

scroll事件的事件对象属于基础Event类型，本身并不包含deltaY这类用于判断滚动方向的属性——因为scroll事件是滚动行为完成后的通知事件，而非触发滚动的输入事件。要实现获取滚动方向的需求，有两种可行方式：

1. 通过记录滚动位置差判断方向

保存滚动前的位置，在scroll事件触发时对比当前位置，以此判断滚动方向：

let lastScrollTop = 0;
window.addEventListener('scroll', () => {
  const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (currentScrollTop > lastScrollTop) {
    console.log('向下滚动');
  } else if (currentScrollTop < lastScrollTop) {
    console.log('向上滚动');
  }
  // 处理滚动到顶部的边界情况，避免负数影响判断
  lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
});

2. 直接监听wheel事件获取方向

如果需要使用deltaY这类属性，应该直接监听wheel事件——这是响应鼠标滚轮/触摸板滚动输入的事件，其事件对象原生包含deltaY、deltaX等属性：

window.addEventListener('wheel', (e) => {
  if (e.deltaY > 0) {
    console.log('向下滚动');
  } else if (e.deltaY < 0) {
    console.log('向上滚动');
  }
});

注意：wheel事件会在scroll事件之前触发，若页面存在滚动行为，两者都会被触发；不同设备的deltaY绝对值可能有差异，但正负方向是统一的。

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