Angular中Razorpay支付或模态框关闭后垂直滚动条消失问题求助

问题根因 #

你之前的方案失效核心是直接通过$('body').css('overflow', 'auto')给body添加了内联样式，内联样式优先级远高于Bootstrap通过.modal-open类设置的overflow: hidden规则，导致后续打开Bootstrap模态框时原生逻辑被覆盖失效。

最优解决方案 #

方案1：仅清理内联样式（无侵入，推荐） #

不要手动给overflow赋值，只需要移除RazorPay添加的overflow内联样式，就能让样式控制权交还给Bootstrap的类规则，完全不干扰原有模态框逻辑。
修改你的RazorPay配置代码如下：

handler: function (response) {
  // 清空overflow内联样式，恢复CSS类优先级控制
  $('body').css('overflow', '');
},
modal: {
  ondismiss: function () {
    $('body').css('overflow', '');
  },
}

方案2：全局监听自动处理（兜底方案） #

如果不想修改现有RazorPay调用逻辑，可以全局初始化一个MutationObserver自动处理样式冲突：

// 全局初始化一次即可
const bodyObserver = new MutationObserver((mutations) => {
  mutations.forEach(item => {
    if (item.attributeName === 'style') {
      const bodyEl = document.body;
      // 当body overflow被设为hidden，且没有Bootstrap模态框打开时，清除冗余样式
      if (bodyEl.style.overflow === 'hidden' && !bodyEl.classList.contains('modal-open')) {
        bodyEl.style.overflow = '';
      }
    }
  });
});
bodyObserver.observe(document.body, { attributes: true });

额外兼容规则 #

可以在全局CSS中添加如下规则，确保Bootstrap模态框打开时滚动条一定被隐藏，避免优先级冲突：

body.modal-open {
  overflow: hidden !important;
}

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