JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/ngryman/jquery.finger/master/dist/jquery.finger.js"></script>
<div id="container">
    <div id="content">Hello hello</div>
</div>

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    height: 100%;
    background: black;
}
#container {
    margin: 5%;
    height: 100%;
    overflow: scroll;
}
#content {
    width: 200%;
    height: 200%;
    background: 
        -webkit-linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
        -webkit-linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
        -webkit-linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
        -webkit-linear-gradient(45deg, #ECEDDC 25%, transparent 25%);	
    background-size: 100px 100px;
    background-color: #EC173A;
}

JavaScript

var lastTimeStamp = 0;
$('#content').on('drag', function (e) {
    if ('vertical' == e.orientation) return;
    e.preventDefault();
});