JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<title>test</title>
		<script type="text/javascript" src="https://raw.github.com/BriteSnow/brite/master/dist/brite-snapshot.min.js"></script>
	</header>
	<body>
		<div style="height: 400px;">
			<h1 style="height:50px;text-align: center">Test</h1>
			<div style="height:350px;overflow: auto;">
				<div id="red" style="background-color: red;width: 100%;">
					red<br/>
					red<br/>
					red<br/>
					red<br/>
					red<br/>
					red<br/>
					red<br/>
					red<br/>
					red<br/>
					red<br/>
					red<br/>
					red<br/>
					red<br/>
				</div>
				<div id="blue" style="background-color: blue;width: 100%;">
					blue<br/>
					blue<br/>
					blue<br/>
					blue<br/>
					blue<br/>
					blue<br/>
					blue<br/>
					blue<br/>
					blue<br/>
					blue<br/>
					blue<br/>
					blue<br/>
					blue<br/>
					blue<br/>
				</div>
			</div>
		</div>
	</body>

JavaScript

//    the bdragEvent block the scroll on webkit mobile (test on Ipad2) when we tap on the red part
//    when we top to scroll on the blue part, it's work fine
$('#red').on('bdragstart', function(){
    console.log('bdragstart on red');
});