JSFiddle - React, Tailwind, and code Playground

by Eshan Rajapakshe

HTML

<h1>SMOOTH SCROLLING</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam velit velit, congue et mollis nec, imperdiet non augue. Ut ut ligula pretium, elementum nibh ac, tincidunt leo. Vestibulum tempus, velit vel vulputate eleifend, mauris elit rhoncus mauris, eu commodo turpis erat id metus. Mauris laoreet rutrum augue, in hendrerit est mollis sollicitudin. Morbi pulvinar blandit justo, tincidunt malesuada ipsum ultrices quis. Mauris et libero vulputate, congue arcu luctus, sagittis orci. Fusce tincidunt enim nec rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu vulputate purus. Phasellus vitae molestie ligula. Nunc placerat porttitor sem. Duis id nulla blandit, euismod mauris sed, finibus leo.
<br><br>
Mauris faucibus, odio eu fermentum imperdiet, augue ligula mattis ipsum, quis sollicitudin odio urna eget dolor. Morbi et leo et tellus porttitor porta eget ac ante. Donec blandit nisl orci, non semper augue laoreet non. Fusce nec nibh non nisi dapibus consectetur. Quisque quis sagittis arcu. Sed varius neque ac enim accumsan efficitur. Sed auctor orci nibh, eu rhoncus sem tincidunt et.
<br><br>
Donec a sollicitudin diam. Nunc vehicula ac purus ac efficitur. Mauris enim mauris, posuere consequat arcu non, molestie porta purus. Curabitur in luctus augue. Vestibulum at massa porttitor, volutpat libero rhoncus, suscipit elit. Suspendisse vulputate ante massa, non faucibus metus hendrerit aliquam. Fusce sit amet diam iaculis, egestas augue nec, imperdiet ante. Quisque ultricies id mi eu dictum. Sed id odio vel urna rutrum laoreet. Morbi eget congue orci, quis luctus lacus. Nulla quis est nec leo interdum fringilla nec suscipit ex.
<br><br>
Etiam tincidunt, erat at pharetra tincidunt, lectus neque pretium lorem, a feugiat elit ante a sapien. Vestibulum iaculis sollicitudin ornare. Nullam et...

CSS

body {
  padding: 10px 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  font: 30px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #999;
  background: #1d1f20;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1 {
  width: 70vw;
  font-weight: bold;
  font-size: 100px;
}
div {
  margin-bottom: 70px;
  width: 70vw;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb {
  border-right: solid 5px #1d1f20;
  background: #5f5f5f;
}
::-webkit-scrollbar-track {
  border: none;
  background: #1d1f20;
}

JavaScript

new SmoothScroll();

function SmoothScroll(el) {
  var t = this, h = document.documentElement;
  el = el || window;
  t.rAF = false;
  t.target = 0;
  t.scroll = 0;
  t.animate = function() {
    t.scroll += (t.target - t.scroll) * 0.1;
    if (Math.abs(t.scroll.toFixed(5) - t.target) <= 0.47131) {
      cancelAnimationFrame(t.rAF);
      t.rAF = false;
    }
    if (el == window) scrollTo(0, t.scroll);
    else el.scrollTop = t.scroll;
    if (t.rAF) t.rAF = requestAnimationFrame(t.animate);
  };
  el.onmousewheel = function(e) {
    e.preventDefault();
    e.stopPropagation();
    var scrollEnd = (el == window) ? h.scrollHeight - h.clientHeight : el.scrollHeight - el.clientHeight;
    t.target += (e.wheelDelta > 0) ? -70 : 70;
    if (t.target < 0) t.target = 0;
    if (t.target > scrollEnd) t.target = scrollEnd;
    if (!t.rAF) t.rAF = requestAnimationFrame(t.animate);
  };
  el.onscroll = function() {
    if (t.rAF) return;
    t.target = (el == window) ? pageYOffset || h.scrollTop : el.scrollTop;
    t.scroll = t.target;
  };
}