JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/css/nanoscroller.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/javascripts/jquery.nanoscroller.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/css/nanoscroller.css">
<div class='wrapper nano nano_scroll-outside'>
    <div class='large nano-content'>
      text<br/>
      <br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/>
      text
      <br/><br/><br/><br/><br/><br/><br/><br/><br/>
      text
      <br/><br/><br/><br/><br/><br/><br/><br/><br/>
      text
    </div>
</div>

CSS

.wrapper {
  position:relative;
  height: 250px;
  overflow: hidden;
  width: 400px;
}

.large {
  width: 300px;
}

.nano { background: #bba;}
.nano .nano-content { padding: 10px; background: cornflowerblue; }
.nano .nano-pane   { background: #888; width:30px; }
.nano .nano-slider { background: #111; }

JavaScript

$(".nano").nanoScroller({
	alwaysVisible: true,
});