JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<title>jq test</title>
</head>
<body>
<div style="position: relative; width: 1000px; height: 100px; border: 5px solid yellow;">
<div style="width: 20000px; position: absolute; left:-10000px" id="content">
<div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">0</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">100</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">200</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">300</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">400</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">500</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">600</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">700</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">800</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">900</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">1000</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">1100</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">1200</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">1300</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">1400</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">1500</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">1600</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float: left">1700</div><div style="border-right: 1px solid red; width: 99px; height: 100px; float:...