移动端不依赖touch事件、可覆盖惯性滚动阶段的文档滚动检测方法咨询

安全阿岳

2026-9-24

解决方案

你原方案的问题在于仅监听触摸相关事件，惯性滚动阶段触摸事件已经停止触发，自然无法统计这部分滚动距离。直接监听全局scroll事件即可覆盖所有滚动场景，包括手动拖动、惯性滚动、点击锚点跳转等触发的滚动行为。

优化实现要点

不需要依赖touch事件计算滚动方向和距离，scroll事件触发时直接读取当前scrollTop值计算滚动比例即可，逻辑更简洁也更稳定
建议添加节流处理，避免滚动事件高频触发导致的性能问题
推荐使用transform代替修改left属性，性能更好，不会触发页面重排

优化后代码示例

var wave = $('.front-page__mobile-wave');
// 缓存DOM高度和元素宽度，若页面有动态内容更新，需要在内容变化后重新赋值
var docHeight = $(document).height();
var waveWidth = wave.width();
var unitOffset = waveWidth / 100;
// 节流标识，避免高频触发
var ticking = false;

function updateWavePosition() {
  var scrollTop = $(window).scrollTop();
  // 计算滚动比例，限制在0-100范围内避免偏移超出预期
  var scrollPercent = Math.min(100, Math.max(0, scrollTop / docHeight * 100));
  var offsetX = - unitOffset * scrollPercent;
  // 用transform实现位移，开启GPU加速提升性能
  wave.css('transform', 'translateX(' + offsetX + 'px)');
  ticking = false;
}

$(window).on('scroll', function() {
  if (!ticking) {
    window.requestAnimationFrame(updateWavePosition);
    ticking = true;
  }
});

// 监听页面尺寸变化，重新计算宽高适配不同场景
$(window).on('resize', function() {
  docHeight = $(document).height();
  waveWidth = wave.width();
  unitOffset = waveWidth / 100;
  updateWavePosition();
});