JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<h1>
Simulated scrollbar
</h1>

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

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

  </div>
</div>

<h1>
Native scrollbar
</h1>

<div class="nouter">
  <div class="ninner">

  </div>
</div>

CSS

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

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

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

.nouter {
  height: 300px;
  width: 300px;
  overflow: auto;
}

.ninner {
  height:2000px;
  width:2000px;
  background-color: green;
}

JavaScript

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