仅滚动模式

Question

我制作了具有设定高度和宽度的模态。

当我单击按钮以打开Modal时，新类（.modal-open）被添加到BODY标记中。现在BODY无法滚动。那就是我想要的，没问题。

.modal-open {
  overflow: hidden;
}

我现在想做的是我无法弄清楚。

我想阻止主体滚动，并且不为Modal设置height属性，因此我可以滚动Modal的内容而无需进行Y滚动。像这样：

我该怎么做才能滚动Modal的全部内容而不会卡住？

这是我的CSS Modal类：

.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;
  }
}

Answer 1

如果不看其余代码就很难确定。但是，假设Content元素位于my-modal的内部，则应该对内部元素使用position: absolute而不是固定的。

固定位置会产生奇怪的效果，因为它以与绝对位置无关的方式绑定到身体。绝对引用堆栈中下一个显式放置的父元素，因此您的放置应保持不变。

这样做之后，内容上的height和overflow-y应该会产生您期望的效果。