JSFiddle - React, Tailwind, and code Playground

by Sergio Martinez

HTML

<button class="showHide">show/hide overlay</button>
<br/>
<br/>

<div class="scrollable">1
    <br/>2
    <br/>3
    <br/>4
    <br/>5
    <br/>6
    <br/>7
    <br/>8
    <br/>9
    <br/>10
    <br/>11
    <br/>12
    <br/>13
    <br/>14
    <br/>15
    <br/>16
    <br/>17</div>
<div class="overlay">
    <div class="overlayInner">
        1
    <br/>2
    <br/>3
    <br/>4
    <br/>5
    <br/>6
    </div>
</div>

CSS

.scrollable {
    width:100%;
    height:200px;
    -webkit-overflow-scrolling:touch;
    overflow:scroll;
}
.overlay {
    display:none;
    position:absolute;
    top:45px;
    width:100%;
    overflow:scroll;
    height:200px;
    -webkit-overflow-scrolling:touch;
    background-color:black;
    opacity:.5;
    transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0); 
 transition: opacity 300ms ease;
    z-index:10;
}

.overlayInner {
    color:red;
    height:101%;
    margin-left:30px;
}

JavaScript

$(".showHide").click(function () {
    
    $(".overlay").toggle();
});