<html>

<head>

	<style>

body {

	overflow: hidden;

}

div#wrapper {

	position: relative;

	height: 400px;

	overflow: hidden;

}

div#content {

	height: 12000px;

	color: white;

	background-color: red;

}

	</style>

</head>

<body>

	<main>

		<h1>Trackpad Scroll</h1>

		<div id="wrapper">

			<div id="content" contenteditable="true">

				This will be a long long long div with height set by css style.

			</div>

		</div>

	</main>

	<script type="text/javascript">

document.addEventListener("wheel", () => {

	console.log("Browser detect `wheel` event!");

});

	</script>

</body>

</html>