模態打開時停止在主體上滾動，並允許在模態div上滾動

Question

當我打開模態時，我可以向下滾動到頁面主體，但不能向下滾動模態以查看所有數據（僅后台站點正在滾動），任何想法如何停止在后台主體上滾動但允許在模態本身上滾動？

這是我的CSS：

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 10000px;
    background-color: /* rgba(0, 0, 0, .5); */rgba(43, 46, 56, 0.9);
    transition: opacity .3s ease;

}


.modal-container {
    box-sizing: border-box;
    width: 75%;
    z-index: 10000;
    /* max-height: 650px; */
    overflow: auto;
    margin: 0px auto 0;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-overflow-scrolling: touch;

}

模態html：

<div class="modal-mask" @click="$emit('close')" v-show="show" transition="modal">
        <div @click.stop class="modal-container">

            <button @click="$emit('close')"><i class="fa fa-chevron-left" aria-hidden="true"></i>
            </button>
            <div class="modal-header">
                <h2>Title</h2>
            </div>

            <div class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>

            <div class="modal-footer text-right">
                <!-- <button class="modal-default-button">
                    Close
                </button> -->
            </div>
        </div>
    </div>

我嘗試在模態打開時向主體添加overflow：hidden，但它確實取消了主體上的滾動，但仍然無法讓我在模態上滾動

Answer 1

您可以將主體的樣式設置為overflow: hidden會使滾動消失，然后您所要做的就是將div模式設為div ，使其overflow為scroll或auto並基本使模型可滾動。 請記住，模態父對象應處於position: fixed ，其width和height應為100% 。

Answer 2

當打開模態時，使用jQuery / JS修改body的overflow ，可以使它停止頁面，並且模態仍然可以滾動。

該解決方案的關鍵方面是：

• 模態有overflow: scroll; 組。
• 主體設置為overflow: hidden; 打開模態時。

我模擬了一個非常簡單的示例，如下所示：

 $('.click').click(function(){ $('.modal').show(); $('body').css("overflow", "hidden"); }); 

 .content { height: 700px; width: 100%; background: grey; } .click { background: blue; cursor: pointer; } .modal { position: absolute; width: 100px; height: 100px; background: red; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; overflow: scroll; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="content"> This is the main content that scrolls until the modal is opened. <div class="click">Click me to open modal</div> <div class="modal">This is a modal that requires me to scroll down on hence there is a lot of placeholder text in here that I am having to type man I should've used Lipsum.</div> </div> 

讓我知道您是否需要其他幫助。