Javascript 使用CSS和HTML模式滚动而不是正文滚动

我想在我的模态中有一个向下/向上的滚动，而不是在主体中。例如，如果我有may文本框和标签，模态将有向下滚动。附言：模态正在工作

结构如下：

//script
<script>
$(document).ready(function(){
  $(".call_modal").click(function(){
  $(".modal").fadeIn();
  $(".modal").fadeIn();
  $(".modal_main").show();
  $(".text").show();
    });
});
$(document).ready(function(){
  $(".close").click(function(){
  $(".modal").fadeOut();
  $(".modal_main").fadeOut();
    });
});
</script>

//html
    <div class="modalcontainer">
        <a class="call_modal" style="cursor:pointer;">Show Modal</a>
        <div class="modal">
            <div class="modal_close close"></div>
            <div class="modal_main">
                <label>Enter Username:</label>
                <input type="text" name="text_username" class="text_username">
            </div>
        </div>
    </div>
</div>

---

你尝试过溢出属性css吗

.modal { overflow-y: scroll; }

嗯， 我想知道你为什么把两个固定的元素粘在一起。固定位置的元素类似于将其张贴在显示器上。它不再出现在页面流中。难道你不希望一个容器被修复，而里面的所有容器再次处于正常的流动状态吗

我只是在codepen上重新构建了它，以便更深入地了解它。modal只需要

显示：块

。对.modal和动画进行一些调整可能会使其更可预测。此外，您还应该注意供应商前缀。至少提供那些没有前缀的属性

.modal_main {
    width: 50%;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    position: absolute;
    top: 5vh;
    border-radius: 4px;
    left: 50%;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    /* -webkit-backface-visibility: visible !important; */
    -webkit-animation-name: fadeInRight;
    bottom: 5vh;
}

---

您可能需要查看

将css放在问题中。对于打开/关闭JS的主体，只需控制

溢出

。和添加/删除模式的

owerflow

。@HenriqueOeckslerBertoldi done语法是什么@SergeyGultyaev@DaveSpencer

body{overflow:hidden；}

和

#modal id{overflow:auto；}

。这是当你打开模态的时候。关闭时-删除这些样式。主体将向下滚动，但模态没有。

.modal_main {
    width: 50%;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    position: absolute;
    top: 5vh;
    border-radius: 4px;
    left: 50%;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    /* -webkit-backface-visibility: visible !important; */
    -webkit-animation-name: fadeInRight;
    bottom: 5vh;
}