JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<span></span>
</div>
CSS
#container{
width:300px;
height:300px;
overflow:auto;
border:1px solid black;
-webkit-overflow-scrolling: touch;
}
span{
width:100%;
height:1200px;
float:left;
background: red;
background: -webkit-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);
}
JavaScript
var container = document.getElementById('container');
function scroll_function() {
var new_position_top = container.scrollTop;
if(new_position_top > 600) {
container.scrollTop = 0;
}
}
container.addEventListener('scroll', scroll_function);