基于快速向上滚动的Exit Intent实现求助及代码报错解决

问题分析 #

你要实现的快速向上滚动触发Exit Intent完全可行，之前的代码报错核心原因是当前JavaScript编译环境不支持ES2015（ES6）的箭头函数语法，另外原代码的滚动速度计算逻辑存在异步时序问题，导致无法正确判断滚动速度。

解决步骤 #

1. 替换箭头函数为ES5语法

把所有() => {}替换成function() {}，适配低版本JS环境：

• 外层的setTimeout回调
• scrollSpeed函数定义
• 内部的setTimeout回调

2. 修正滚动速度计算逻辑

原代码里的setTimeout是异步执行的，计算currentSpeed时newPosition还未被赋值，会得到NaN。正确的做法是记录每次滚动的时间戳和滚动位置，通过两次滚动的位置差除以时间差得到滚动速度。

3. 添加防抖优化

滚动事件会频繁触发，通过持续更新基准位置和时间戳的方式，避免不必要的重复计算，提升性能。

完整可运行代码 #

<script>
// 初始化变量，记录上一次滚动的位置和时间戳
var lastScrollY = window.scrollY;
var lastTime = Date.now();
var scrollHandler;

// 延迟10秒再绑定滚动事件，避免页面刚加载就触发
setTimeout(function() {
  document.addEventListener("scroll", scrollHandler = function() {
    var currentScrollY = window.scrollY;
    var currentTime = Date.now();
    
    // 计算时间差（毫秒转秒）和位置差
    var timeDiff = (currentTime - lastTime) / 1000;
    var scrollDiff = currentScrollY - lastScrollY;
    
    // 计算滚动速度：像素/秒，向上滚动时scrollDiff为负数
    var scrollSpeed = scrollDiff / timeDiff;
    
    // 判断是否是快速向上滚动：速度小于-160（向上滚速度为负，绝对值越大越快）
    if (scrollSpeed < -160) {
      // 触发Exit Intent事件
      userengage('event.exit-intent-mobile');
      // 移除滚动监听，避免重复触发
      document.removeEventListener("scroll", scrollHandler);
    }
    
    // 更新上一次的位置和时间戳
    lastScrollY = currentScrollY;
    lastTime = currentTime;
  });
}, 10000);
</script>

代码说明 #

• 变量初始化：lastScrollY和lastTime分别记录上一次滚动的垂直位置和时间戳
• 延迟绑定事件：通过setTimeout延迟10秒绑定滚动监听，避免用户刚进入页面就触发
• 速度计算：用当前滚动位置与上一次的差值，除以时间差得到滚动速度（单位：像素/秒），向上滚动时位置差为负，所以速度为负
• 触发条件：当滚动速度小于-160时，判定为快速向上滚动，触发userengage事件并移除监听，防止重复触发

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