React应用中Razorpay支付弹窗关闭后垂直滚动条消失如何修复

问题原因 #

该异常是Razorpay SDK的固有行为导致：弹窗打开时会自动为<body>元素设置overflow: hidden属性以禁止底层页面滚动，但在用户主动关闭弹窗、支付失败触发关闭等部分场景下，SDK不会自动清除该属性，最终导致页面垂直滚动条消失。

修复方案 #

方案1：监听弹窗关闭事件手动重置滚动属性（推荐） #

在原有Razorpay实例逻辑中新增modal.close事件监听，无论支付成功、失败还是用户手动关闭弹窗，都会触发该事件，统一重置body的滚动属性即可：

async function DisplayRazorpay(payment) {
    const options = {
      key: '*****',
      currency:'INR',
      amount: 1000,
      order_id: '****',
      name: 'abcd',
      description: 'abcd',
      image: logo,
      handler(response) {
        // 保留原有支付成功的业务逻辑
      },
      prefill: {
        name,
        email,
        contact,
      },
    };
    const paymentObject = new window.Razorpay(options);
    paymentObject.open();

    // 新增关闭事件监听，统一重置滚动
    paymentObject.on('modal.close', () => {
      document.body.style.overflow = 'auto';
      // 若你的项目使用html根元素控制全局滚动，可补充下面这行
      // document.documentElement.style.overflow = 'auto';
    });

    paymentObject.on('payment.failed', (err) => {
      // 保留原有支付失败的业务逻辑
      paymentObject.close();
    });
  }

方案2：CSS全局强制覆盖 #

如果事件监听存在兼容问题，也可以在全局样式中添加强制规则，避免SDK修改滚动属性：

body {
  overflow: auto !important;
}

适配注意事项 #

• 若你的项目使用自定义的滚动容器（而非body作为全局滚动根），需要将重置overflow属性的逻辑对应到自定义容器元素上
• React 18+严格模式下如果出现重复弹窗的问题，需要检查Razorpay实例的创建逻辑是否被重复执行，避免多次绑定事件

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