如何用JS检测触摸滑动结束后的元素滚动以更新迷你滚动地图？

1. 基础方案：监听scroll事件 #

浏览器在惯性滚动过程中会持续触发元素的scroll事件，直接绑定该事件即可实时更新迷你地图：

const scrollableEl = document.querySelector('.scrollable-element');
const miniMapMarker = document.querySelector('.mini-map-marker');

function updateMiniMap() {
  // 计算滚动位置占总可滚动宽度的比例
  const scrollRatio = scrollableEl.scrollLeft / (scrollableEl.scrollWidth - scrollableEl.clientWidth);
  // 根据比例更新迷你地图标记的位置（假设迷你地图为横向布局）
  miniMapMarker.style.left = `${scrollRatio * 100}%`;
}

// 绑定滚动事件
scrollableEl.addEventListener('scroll', updateMiniMap);

2. 性能优化：结合requestAnimationFrame节流 #

如果scroll事件触发过于频繁导致性能问题，用requestAnimationFrame限制每帧仅更新一次：

const scrollableEl = document.querySelector('.scrollable-element');
const miniMapMarker = document.querySelector('.mini-map-marker');
let isUpdating = false;

function updateMiniMap() {
  const scrollRatio = scrollableEl.scrollLeft / (scrollableEl.scrollWidth - scrollableEl.clientWidth);
  miniMapMarker.style.left = `${scrollRatio * 100}%`;
  isUpdating = false;
}

scrollableEl.addEventListener('scroll', () => {
  if (!isUpdating) {
    isUpdating = true;
    requestAnimationFrame(updateMiniMap);
  }
});

3. 兜底方案：触摸结束后轮询检测 #

针对部分老旧浏览器惯性滚动后期scroll事件触发间隔过大的情况，结合touchend事件启动轮询，直到滚动完全停止：

const scrollableEl = document.querySelector('.scrollable-element');
const miniMapMarker = document.querySelector('.mini-map-marker');
let lastScrollPos = 0;
let pollTimer = null;

function updateMiniMap() {
  const scrollRatio = scrollableEl.scrollLeft / (scrollableEl.scrollWidth - scrollableEl.clientWidth);
  miniMapMarker.style.left = `${scrollRatio * 100}%`;
}

// 监听滚动事件
scrollableEl.addEventListener('scroll', () => {
  updateMiniMap();
  lastScrollPos = scrollableEl.scrollLeft;
  if (pollTimer) clearTimeout(pollTimer);
});

// 触摸结束后启动轮询
scrollableEl.addEventListener('touchend', () => {
  pollTimer = setInterval(() => {
    if (scrollableEl.scrollLeft === lastScrollPos) {
      clearInterval(pollTimer);
      pollTimer = null;
    } else {
      updateMiniMap();
      lastScrollPos = scrollableEl.scrollLeft;
    }
  }, 16); // 对应60fps的更新间隔
});

原理说明 #

浏览器的惯性滚动是模拟的持续滚动动作，过程中会不断触发scroll事件，因此基础的事件监听即可覆盖绝大多数场景。节流和轮询方案是针对性能和兼容性的补充优化。

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