移动端内DIV滚动误判为手势导致滚动失效问题求助

以下是几个经过验证的解决方案，按推荐优先级排序：

1. 使用CSS overscroll-behavior 属性（首选） #

这是现代浏览器专门针对滚动边界问题提供的解决方案，无需JS即可修复。给目标滚动DIV添加以下样式：

.your-scrollable-div {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

overscroll-behavior: contain 会将滚动行为严格限制在当前元素内部，既不会触发父元素的滚动链，也能避免边界滑动后切换方向的冻结问题，完美适配移动端场景。

2. 精准控制触摸事件（兼容旧浏览器） #

如果需要兼容不支持overscroll-behavior的旧浏览器，可以通过JS监听触摸事件，阻止边界处的无效滑动默认行为：

const scrollableDiv = document.querySelector('.your-scrollable-div');
let startX, startY;

scrollableDiv.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

scrollableDiv.addEventListener('touchmove', (e) => {
  const deltaX = e.touches[0].clientX - startX;
  const deltaY = e.touches[0].clientY - startY;
  
  // 垂直滚动边界判断
  const atTop = scrollableDiv.scrollTop === 0;
  const atBottom = scrollableDiv.scrollTop + scrollableDiv.clientHeight >= scrollableDiv.scrollHeight;
  
  // 垂直滑动时，若已到边界则阻止默认行为，避免浏览器劫持事件
  if (Math.abs(deltaY) > Math.abs(deltaX)) {
    if ((atTop && deltaY > 0) || (atBottom && deltaY < 0)) {
      e.preventDefault();
    }
  } else {
    // 水平滚动边界判断
    const atLeft = scrollableDiv.scrollLeft === 0;
    const atRight = scrollableDiv.scrollLeft + scrollableDiv.clientWidth >= scrollableDiv.scrollWidth;
    if ((atLeft && deltaX > 0) || (atRight && deltaX < 0)) {
      e.preventDefault();
    }
  }
}, { passive: false });

注意必须设置passive: false，否则无法调用preventDefault阻止默认行为。

3. 锁定单一滚动方向（按需使用） #

如果你的DIV只需要单一方向滚动（比如仅垂直滚动），直接禁用另一方向的滚动，从根源避免误操作：

.your-scrollable-div {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

这种方式简单粗暴，适合明确滚动需求的场景，完全消除跨方向滑动导致的冻结问题。

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