overflow-y 滚动在自定义模式上可见但不起作用

Question

我的 angular 应用程序中有一个自定义模式。在正文中，我想对条款和条件进行布局（这会很长），所以我需要模态的正文部分能够滚动。问题是当前滚动条是可见的，但它的行为就像它被禁用一样——它不会移动，即使内容确实溢出了。

外观如下： https://i.stack.imgur.com/Lgl9p.png

这是我的代码：

HTML:

<section id="modal">
    <div class="backdrop">
        <cel-dialog [backdrop-dismiss]="true" class="modal-dialog">
            <div class="modal-container">
                <div class="modal-header d-flex justify-content-between align-items-center">
                    <h3 class="title">Conditions of Demo Account Access</h3>
                    <div class="close-modal-button">X</div>
                </div>
                <div class="modal-body">
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedyzzzz</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                </div>
                <div class="modal-footer">Footer</div>
            </div>
        </cel-dialog>
    </div>
</section>

CSS:

.backdrop {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.75);
}
.modal-dialog {
    width: 600px;
    height: 250px;
    position: fixed;
    margin: 10% auto;
    left: 0;
    right: 0;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    background: var(--white);
}

.modal-container {
    min-height: 0;
    height: 250px;
    width: 100%;
}

.modal-header {
    height: 20%;
    background-color: var(--blueDark);
    color: white;
}

.modal-body {
    height: 70%;
    overflow-y: auto;
}

.modal-footer {
    height: 10%;
    background-color: black;
}

.modal-header .title {
    margin-left: 10px;
}
.modal-header .close-modal-button {
    margin-right: 10px;
}

Answer 1

class 中的指针事件。_modal.scss 的模态对话框设置为“none” 您可以这样更改：

.modal-dialog {
   .
   .
   .
   /* Add Line Below */
   pointer-events:unset !important;
}

overflow-y 滚动在自定义模式上可见但不起作用

overflow-y Scroll Visible on Custom Modal but is Not Functioning

html

css

modal-dialog

overflow

angular