如何实现移动端网页滚动方向检测？附桌面端参考代码

移动端设备不支持桌面端的wheel事件，需要通过**触摸事件（touchstart/touchend）**来检测滚动方向，核心思路是记录触摸起始和结束时的Y轴坐标，通过坐标差值判断滚动方向。

基础实现代码 #

// 存储触摸起始位置的Y坐标
let startY = 0;

// 监听触摸开始事件，记录初始位置
window.addEventListener('touchstart', function(event) {
  startY = event.touches[0].clientY;
});

// 监听触摸结束事件，计算滑动方向
window.addEventListener('touchend', function(event) {
  const endY = event.changedTouches[0].clientY;
  const diffY = endY - startY;

  if (diffY > 0) {
    // 手指向上滑动 → 页面滚动方向为向上
    console.log('up');
  } else if (diffY < 0) {
    // 手指向下滑动 → 页面滚动方向为向下
    console.log('down');
  }
  // diffY为0时代表无有效滑动，可根据需求自行处理
});

桌面+移动端兼容整合方案 #

如果需要同时适配两端设备，可以把两种事件逻辑结合：

// 桌面端wheel事件逻辑
window.addEventListener("wheel", function (event) {
  event.preventDefault();
  console.log(event.deltaY < 0 ? 'up' : 'down');
});

// 移动端触摸事件逻辑
let startY = 0;
window.addEventListener('touchstart', (e) => startY = e.touches[0].clientY);
window.addEventListener('touchend', (e) => {
  const diffY = e.changedTouches[0].clientY - startY;
  if (Math.abs(diffY) > 20) { // 加阈值过滤微小触摸抖动
    console.log(diffY > 0 ? 'up' : 'down');
  }
});

关键注意点 #

• 触摸事件中，touches对应当前屏幕上的所有触摸点，changedTouches对应触发事件时状态改变的触摸点，结束事件用changedTouches更准确。
• 可根据需求添加滑动阈值（比如示例中的20），过滤手指轻微抖动导致的误触发。

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