如何检测用户多次重复scroll down操作并redirect至其他页面

核心实现逻辑 #

整个功能无需引入第三方库，原生JavaScript即可实现，核心逻辑拆解如下：

• 维护3个核心状态值：上一次滚动的垂直位置、有效向下滚动累计次数、计数重置定时器
• 对scroll事件做节流处理，避免高频触发导致性能损耗
• 每次滚动触发时，对比当前滚动位置和上一次记录的位置：只有滚动方向向下、且单次滚动距离超过预设的最小阈值（过滤页面微小抖动的误判），才判定为一次有效向下滚动，累计计数+1
• 每次触发有效滚动后重置计数定时器：如果用户在指定时长内没有新的滚动操作，自动把累计计数清零，避免用户间隔很久的零散滚动凑够次数误触发
• 当累计有效向下滚动次数达到预设阈值时，立刻移除滚动监听（防止重复触发跳转），执行页面重定向

可直接复用的实现代码 #

// 可根据实际需求修改配置项
const CONFIG = {
  targetUrl: '/your-target-page', // 跳转目标地址
  triggerScrollCount: 3, // 触发跳转需要的连续有效向下滚动次数
  minScrollDistance: 50, // 判定为有效向下滚动的最小距离（单位：px）
  countResetDelay: 3000 // 无操作重置计数的等待时长（单位：ms）
}

// 初始化状态
let lastScrollY = window.scrollY;
let validScrollDownCount = 0;
let resetTimer = null;

// 节流函数，优化scroll事件运行性能
function throttle(func, delay = 100) {
  let canRun = true;
  return function(...args) {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      func.apply(this, args);
      canRun = true;
    }, delay)
  }
}

// 滚动事件核心处理逻辑
function handleScroll() {
  const currentScrollY = window.scrollY;
  const scrollDistance = currentScrollY - lastScrollY;

  // 判定为有效向下滚动
  if (scrollDistance > CONFIG.minScrollDistance) {
    validScrollDownCount++;
    // 清除之前的重置定时器
    if (resetTimer) clearTimeout(resetTimer);
    // 启动新的重置定时器
    resetTimer = setTimeout(() => {
      validScrollDownCount = 0;
    }, CONFIG.countResetDelay);

    // 计数达到阈值，执行跳转
    if (validScrollDownCount >= CONFIG.triggerScrollCount) {
      window.removeEventListener('scroll', throttledScrollHandler);
      // 当前页跳转用以下代码
      window.location.href = CONFIG.targetUrl;
      // 如需新标签页打开，注释上一行，改用以下代码
      // window.open(CONFIG.targetUrl, '_blank');
    }
  }

  // 更新上一次滚动位置记录
  lastScrollY = currentScrollY;
}

const throttledScrollHandler = throttle(handleScroll);
// 绑定滚动监听
window.addEventListener('scroll', throttledScrollHandler, { passive: true });

实现注意事项 #

• 不要直接统计scroll事件的触发次数作为滚动次数：用户单次滑动滚轮会触发十几次甚至几十次scroll事件，直接统计事件数会导致判定完全失准，必须通过滚动位置差计算实际滚动距离
• 绑定scroll事件时添加passive: true配置，可以提升滚动时的页面性能，避免监听器阻塞默认滚动行为
• 触发跳转前一定要先移除滚动事件监听，避免重复执行跳转逻辑产生异常
• 最小滚动距离、计数重置时长、触发次数都可以根据实际交互需求调整，比如做「连续向下滚3次跳转下一章节」的阅读类交互时，可以把触发次数设为3，重置时长设为1500ms，最小滚动距离设为80px，交互手感会更自然

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