JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<div class="outer">
  <div class="inner">

  </div>
</div>
<div class="outersc">
  <div class="innersc">

  </div>
</div>

CSS

.outer {
  height: 300px;
  width: 300px;
  overflow: auto;
  overflow-x: hidden;
}

.inner {
  height:2000px;
  width:2000px;
  background-color: green;
}
.outersc {
  height: 16px;
  width: 300px;
  overflow: auto;
}

.innersc {
  height:100%;
  width:2000px;
  background-color: blue;
}

JavaScript

$(".outer").on("wheel", function(e) {
	$(".outersc")[0].scrollLeft = $(".outersc")[0].scrollLeft + 25;
});