弹层-滚动条

要求:弹出框出现,弹出框的内容滚动,但是dom层不随着弹出框的滚动而滚动,在弹层上滚动时整个页面也不滚动

<section class="father">
    <section class="content-body">

    </section>
    <section class="layout">

    </section>
    <section class="layout-body">

    </section>
</section>

.father{
    height: 533px;
    overflow-y: scroll;
    //页面高度设置为屏幕高度,正常情况下超出滚动
}

.content-body{
    height: 533px;
    overflow-y: scroll;//内容高度设置为屏幕高度,正常情况下超出滚动
}

.layout{
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    z-index: 1000000;
}

.layout-body{
    height: 50%;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    z-index: 1000001;
}










































最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容