只滚动模态

我做了一个设定高度和宽度的模型。

当我单击按钮打开模式时,一个新类( .modal-open )添加到 BODY 标签。现在 身体 无法滚动。这就是我想要的,没问题。

.modal-open {
  overflow: hidden;
}

我现在想做的是我想不通的事。

我想阻止尸体滚动而不是设置 height 属性,以便我可以在不使用 Y 纸卷。这样地:

我能做些什么来滚动模态的全部内容而不被卡住?

这是我的CSS模态类:

.my-modal {
  background-color: $color-ink;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;

  &__content {
    position: fixed;
    // overflow-y: scroll;
    top: 20%;
    left: 50vw;
    transform: translateX(-50%);
    border-radius: 5px;
    max-width: 60rem;
    // height: 50vh;
  }
}