如何防止滚动条出现在模式背景的顶部

Question

我将一个固定位置的模态放置在一个相对定位的元素内，不进行任何变换，并且溢出：自动。

问题是，当父级上溢时，模态的背景不会覆盖滚动条-请查看所附图片作为示例。

滚动条也应该被半透明的黑色背景覆盖，但是由于某种原因，它没有被覆盖。有谁知道为什么，和/或我将如何解决这个问题？

我想避免对模式容器使用绝对定位，因为它可以是任何任意层次结构中的嵌套元素。

这是我的.modal-container类的CSS，其中包括背景。

.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 1;
transition: all .1s;
display: flex;
z-index: 200;
justify-content: center;
align-items: center;}

Answer 1

尝试一下

.modal-container {
  overflow-y: auto;
}

或

    html {
      overflow: scroll;
      overflow-x: hidden;
    }
    ::-webkit-scrollbar {
      width: 0px;  /* remove scrollbar space */
      background: transparent;  /* optional: just make scrollbar invisible */
    }
    /* optional: show position indicator in red */
    ::-webkit-scrollbar-thumb {
      background: #FF0000;
    }