JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.10/fastclick.min.js"></script>
<button class="stop">Stop</button>
<button class="scrollTop">Stop & Scroll top</button>
<hr />
<div class="scroll"></div>
CSS
div.scroll {
width: 280px;
height: 200px;
padding: 10px;
border: 1px solid grey;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
white-space: pre;
}
JavaScript
$(document).ready(function () {
if ('ontouchstart' in window) {
window.FastClick.attach(document.body);
}
var scroll = document.querySelector('.scroll');
var stop = document.querySelector('.stop');
var scrollTop = document.querySelector('.scrollTop');
for (var i = 1; i <= 200; i++) {
scroll.innerHTML += i + '\n';
}
stop.addEventListener('click', function() {
scroll.style.overflow = 'hidden';
setTimeout(function() {
scroll.style.overflow = '';
}, 10);
});
scrollTop.addEventListener('click', function() {
scroll.style.overflow = 'hidden';
scroll.scrollTop = 0;
setTimeout(function() {
scroll.style.overflow = '';
}, 10);
});
});