JavaScript实现：触发前置事件后滚动指定距离再触发目标事件

核心逻辑 #

• 用状态变量标记前置事件是否已触发
• 前置事件触发时，记录当前滚动位置作为计算基准
• 仅激活状态下监听滚动事件，计算当前滚动位置与基准点的相对差值
• 差值达到设定阈值时执行目标事件，可按需移除监听避免重复触发

代码实现（JavaScript） #

// 状态标记：前置事件是否已触发
let preEventActivated = false;
// 存储前置事件触发时的基准滚动位置
let baseScrollPos = 0;
// 触发目标事件的滚动阈值（可自定义）
const triggerThreshold = 300;

// 前置事件示例：绑定按钮点击
document.querySelector('.pre-trigger-btn').addEventListener('click', () => {
  preEventActivated = true;
  // 记录当前滚动位置（兼容不同浏览器）
  baseScrollPos = window.pageYOffset || document.documentElement.scrollTop;
  // 添加滚动监听
  window.addEventListener('scroll', checkScrollDistance);
});

// 滚动检测处理函数
function checkScrollDistance() {
  if (!preEventActivated) return;

  const currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;
  // 计算滚动的相对距离（绝对值兼容上下滚动）
  const scrollDistance = Math.abs(currentScrollPos - baseScrollPos);

  if (scrollDistance >= triggerThreshold) {
    // 执行目标事件
    runTargetAction();
    // 可选：移除监听避免重复触发，若需多次触发可删除此行
    window.removeEventListener('scroll', checkScrollDistance);
    // 重置状态，以便再次触发前置事件
    preEventActivated = false;
  }
}

// 目标事件示例
function runTargetAction() {
  console.log('目标事件已执行');
  // 此处替换为你的业务逻辑，如展示弹窗、加载数据等
}

关键细节说明 #

• 状态控制：preEventActivated变量确保未触发前置事件时，滚动逻辑完全不执行
• 基准位置：baseScrollPos记录的是前置事件触发瞬间的滚动位置，保证滚动距离计算的相对性
• 差值计算：使用Math.abs处理向上/向下滚动的场景，满足双向触发需求
• 监听管理：执行目标事件后移除滚动监听，避免后续滚动重复触发；若需要支持多次触发，可移除监听移除的代码，并调整状态逻辑

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