CSS

【CSS】スクロール可能なオーバーレイScrollable Overlay

May 21, 2017
scrollable overlay

Scrollable Overlayはオンになるとボディからスライド表示され、スクロール可能なオーバーレイ。

HTML Structure

<div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

Styling

html, body {
    height: 100%;
}

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}