Razorpay 付款成功或 Razorpay 模式在 Angular 中关闭后，垂直滚动条消失答案

【问题标题】：Vertical Scroll bar goes away after Razorpay payment is Success or Razorpay Modal is Closed in AngularRazorpay 付款成功或 Razorpay 模式在 Angular 中关闭后，垂直滚动条消失
【发布时间】：2022-01-11 11:34:53
【问题描述】：

当我在页面上打开任何引导模式时，正文的溢出是隐藏的，当我关闭模式时，溢出是可见的。这是正确的方法。

但是对于 RazorPay，当我打开支付模式时，溢出是隐藏的，但是在付款或关闭支付模式后没有付款，溢出不可见。我无法滚动页面，我需要刷新页面才能使其正常工作。

到目前为止我尝试过的解决方案：

我在主 CSS 文件的主体标签中添加了溢出：自动。问题是，当我打开模式时，溢出并没有隐藏。
我尝试了下面的代码，它的作用是，在支付成功或支付窗口关闭时，溢出：自动将添加到正文中。但问题是当我第二次打开模式时，溢出并没有被隐藏。它始终保持可见。
```
handler: function (response) {
          $('body').css('overflow', 'auto');
        },
 modal: {
          ondismiss: function () {
            $('body').css('overflow', 'auto');
          },
        },
```
要再次隐藏溢出，我必须在所有有模式按钮的地方添加 $('body').css('overflow', 'hidden') 否则我必须刷新页面才能制作又可以正常使用了，但是每次刷新页面都没有很好的用户体验。

有没有最好的方法来实现这一点？我检查了 Razorpay 文档页面，但找不到任何其他解决方案。

【问题讨论】：

标签： css angular razorpay

【解决方案1】：

将此添加到styles.css，现在可以正常工作了。

body {
  overflow: visible !important;
}

【讨论】：

我已经试过了。但问题是，添加上述属性时，溢出总是可见的。默认情况下，当我们打开 Boostrap Modal 时，Overflow 会被隐藏，当我们关闭 Modal 时，Overflow 会出现。 Razorpay 不会发生这种行为。我的页面上有许多 Bootstrap 模式，由于此属性而受到影响。
利用封装来限制 CSS 的范围。 angular.io/guide/view-encapsulation