JSFiddle - React, Tailwind, and code Playground

by Mukesh Yadav

HTML

<script src="https://rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>
<link rel="stylesheet" href="https://rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css">
<div id="container">
  <div class="content"></div>
</div>

CSS

#container {
  position: relative;
  width: 480px;
  height: 320px;
  overflow: auto;
}

#container .content {
  background-image: url('https://i.imgur.com/nAUUNzH.jpg');
  width: 1280px;
  height: 720px;
}

JavaScript

var el = document.getElementById('container');
var ps = new PerfectScrollbar(el, {
  wheelSpeed: 2,
  wheelPropagation: true
});

el.addEventListener('ps-scroll-down', function () {
	el.scrollTop = 0;
});