css - 仅滚动模态

Question

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

当我单击按钮打开 Modal 时，标签.modal-open中添加了一个新类 ( ) 。BODY现在BODY无法滚动。这就是我想要的，没有问题。

.modal-open {
  overflow: hidden;
}

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

我想阻止正文滚动并且不height为模态设置属性，所以我可以在没有Y滚动的情况下滚动模态的内容。像这样：

我可以做些什么来滚动模态的整个内容并且不卡住？

这是我的 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;
  }
}

标签： css

Answer 1

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

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

在你这样做之后，height内容overflow-y应该会产生你所期望的效果。