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;

}

modal 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>

我尝试在打开模态时添加溢出：隐藏到身体，它确实取消了身体上的滚动，但仍然没有让我滚动模态

Answer 1

您可以将正文的样式设置为overflow: hidden，这会使滚动消失，然后您只需要将div内的模态设为overflow {{1}或scroll基本上使模型可滚动。请记住，模态父级应为auto，其position: fixed和width应为height。

Answer 2

使用jQuery / JS在打开模态时修改body的{{1}}，你可以使页面停止滚动，模态仍然可以滚动。

此解决方案的主要方面是：

模式设置为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;
}

如果您需要任何其他帮助，请与我们联系。

当模态打开时停止在主体上滚动并允许在模态div上滚动

2 个答案: