React移动端：如何阻止下拉刷新并响应特定下拉手势？

一、快速阻止下拉刷新：使用CSS overscroll-behavior #

这是最简洁的解决方案，直接通过CSS禁用浏览器边缘滚动的默认行为（包括下拉刷新）：

body {
  overscroll-behavior-y: contain;
}

• 作用：页面滚动到顶部/底部边缘时，不会触发浏览器原生的滚动扩展行为（如下拉刷新、弹性反弹），仅限制在当前页面内部滚动。
• 兼容性：主流移动端浏览器（Chrome、Safari、Firefox移动端）均支持该属性，无需额外兼容代码。

如果只想在弹窗打开时禁用下拉刷新，可通过JS动态切换类：

.no-pull-refresh {
  overscroll-behavior-y: contain;
}

// 打开弹窗时添加限制类
function openModal() {
  document.body.classList.add('no-pull-refresh');
  // 其他弹窗打开逻辑
}

// 关闭弹窗时移除限制类
function closeModal() {
  document.body.classList.remove('no-pull-refresh');
  // 其他弹窗关闭逻辑
}

二、自定义响应下拉手势：JS监听触摸事件 #

如果需要在用户触发顶部下拉手势时关闭弹窗而非全局阻止刷新，可以通过监听触摸事件实现精细化控制：

let startY = 0;

// 记录触摸起始位置
document.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
}, { passive: false });

// 处理触摸移动逻辑
document.addEventListener('touchmove', (e) => {
  const currentY = e.touches[0].clientY;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const modal = document.querySelector('.your-modal-selector');
  
  // 仅满足三个条件时触发：页面滚到顶部、手势为向下拉、弹窗处于显示状态
  if (scrollTop <= 0 && currentY > startY && modal && modal.offsetParent !== null) {
    e.preventDefault(); // 阻止默认下拉刷新
    modal.style.display = 'none'; // 执行关闭弹窗操作
    // 可添加弹窗关闭动画、状态重置等额外逻辑
  }
}, { passive: false });

• 关键注意事项：
  • 必须将事件监听的passive设为false，否则无法调用e.preventDefault()（默认touchmove事件为passive: true，防止阻塞页面滚动）。
  • 用modal.offsetParent !== null判断弹窗是否显示，比直接判断display属性更可靠，适配不同的隐藏实现方式。
  • 若页面存在内部滚动容器（如弹窗内的滚动区域），需通过判断事件目标是否属于该容器，避免误拦截内部滚动操作。

三、补充说明 #

• 若应用不需要全局禁用下拉刷新，仅在弹窗存在时处理，优先选择JS监听方案，保留正常场景下的原生下拉刷新功能。
• 部分浏览器（如Safari）的弹性滚动效果可能受overscroll-behavior影响，若需保留弹性滚动仅禁用下拉刷新，JS方案的灵活性更高。

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