如何判断元素当前是否正处于活跃滚动状态

原生DOM没有提供任何内置属性或方法可以直接判断元素是否处于滚动状态，不管滚动由用户鼠标滚轮/触摸板触发，还是scrollIntoView()这类API调用触发，都没有原生的直接判断入口。

你可以通过scroll事件监听+防抖的方式自定义滚动状态标记，该方案对所有滚动触发来源都生效：

const targetEl = document.querySelector('#target-element')
// 给元素挂载自定义滚动状态标识
targetEl.isScrolling = false
let scrollDebounceTimer

targetEl.addEventListener('scroll', () => {
  // 滚动触发时立刻标记为正在滚动
  targetEl.isScrolling = true
  clearTimeout(scrollDebounceTimer)
  // 滚动停止150ms后标记为非滚动状态，时长可按需调整
  scrollDebounceTimer = setTimeout(() => {
    targetEl.isScrolling = false
  }, 150)
})

使用时直接读取自定义属性判断即可：

function yourCustomOperation() {
  // 滚动状态下直接跳过操作
  if (targetEl.isScrolling) return
  // 其余业务逻辑
}

• 防抖延迟时长可根据场景调整，普通连续滚动场景100~200ms即可覆盖
• 如果使用带平滑动画的scrollIntoView({behavior: 'smooth'})，可以把延迟调整到和动画时长匹配，避免提前误判滚动结束
• 页面/元素销毁前记得移除scroll事件监听器，避免内存泄漏

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