求实现JS函数：用户滚动时返回true，停止滚动后返回false

核心实现思路 #

通过状态变量标记滚动状态，结合防抖机制实现需求：

• 用户开始滚动时，立即将状态设为true
• 滚动停止后，立即将状态重置为false（利用0毫秒延迟的定时器，确保在当前滚动事件循环结束后触发）

完整代码实现 #

// 标记当前是否处于滚动状态
let isScrolling = false;
let scrollTimeoutId;

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  // 滚动触发时，立即标记为正在滚动
  isScrolling = true;
  
  // 清除之前的定时器，避免重复触发状态重置
  clearTimeout(scrollTimeoutId);
  
  // 滚动停止后立即重置状态（0毫秒延迟确保滚动事件结束后立刻执行）
  scrollTimeoutId = setTimeout(() => {
    isScrolling = false;
  }, 0);
});

// 供外部调用的滚动状态检测函数
function userIsScrolling() {
  return isScrolling;
}

结合业务场景使用 #

以下是适配你提供的示例代码的用法：

// 替换为你的实际元素选择器
const items = document.querySelectorAll('.target-item');

items.forEach(item => {
  item.addEventListener('mouseenter', () => showItem());
});

function showItem() {
  // 仅当用户未滚动时执行逻辑
  if (!userIsScrolling()) {
    // 这里编写你的业务逻辑，比如显示元素详情
    console.log('执行showItem逻辑');
  }
}

事件监听器动态管理建议 #

如果需要在滚动时暂时禁用鼠标交互监听器，避免无效触发，可以通过动态绑定/移除监听器实现：

// 单独提取鼠标进入的处理函数，方便后续移除
function handleMouseEnter() {
  if (!userIsScrolling()) {
    showItem();
  }
}

// 动态更新监听器的函数
function updateItemListeners() {
  if (userIsScrolling()) {
    // 滚动时移除监听器，避免误触发
    items.forEach(item => {
      item.removeEventListener('mouseenter', handleMouseEnter);
    });
  } else {
    // 停止滚动后重新绑定监听器
    items.forEach(item => {
      item.addEventListener('mouseenter', handleMouseEnter);
    });
  }
}

// 更新滚动事件处理逻辑，加入监听器管理
window.addEventListener('scroll', () => {
  isScrolling = true;
  clearTimeout(scrollTimeoutId);
  
  // 滚动开始时立即移除监听器
  updateItemListeners();
  
  scrollTimeoutId = setTimeout(() => {
    isScrolling = false;
    // 滚动停止后重新绑定监听器
    updateItemListeners();
  }, 0);
});

补充说明 #

• 0毫秒的定时器延迟是为了确保在当前滚动事件的所有回调执行完成后，再重置滚动状态，保证状态判断的准确性。
• 如果需要调整“滚动停止后判定为非滚动状态”的延迟，只需修改setTimeout的第二个参数即可（比如改为100毫秒，意味着停止滚动100毫秒后才判定为非滚动状态）。

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