JSFiddle - React, Tailwind, and code Playground

by Brian Blakely

HTML

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<header></header>
<section>
    <ul>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
        <li>wat</li>
    </ul>
</section>
<footer></footer>

CSS

html, body {
    height: 100%;
}
body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: justify;
    padding: 0;
}
header,
footer {
    height: 50px;
}
header {
    background: blue;
}
footer {
    background: red;
}
section {
    -webkit-box-flex: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

}
ul li {
    padding: 0 0 0 10px;
    height: 50px;
    line-height: 50px;
}
ul li:nth-child(2n+2) {
    background: #eee;
}

JavaScript

document.documentElement.addEventListener('touchmove', function(e) {
    var elCurr = e.target,
        overflowVal,
        hasScroll = false;
    
    while(elCurr !== document) {
        overflowVal = getComputedStyle(elCurr,null).getPropertyValue("overflow-y");
    
        if(overflowVal === "scroll") {
            hasScroll = true;
            break;
        }

        elCurr = elCurr.parentNode;
    }
    
    if(!hasScroll) {
        e.preventDefault();
    }
}, false);