JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.6.1/js/jquery.overlayScrollbars.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.6.1/css/OverlayScrollbars.min.css">

<button class="overlay-scrollbars">Attach OverlayScrollbars</button>
<button class="destroy">Destroy</button>

<br>
<br>

<!-- Overlay Scrollbar element ↓ -->

<div class="scrollable-wrap">
  <div class="scrollable-content" contenteditable>
  Phasellus porta metus sapien, nec Cras eu viverra velit. Suspendisse. <br>.<br>.<br>.<br>.<br>.<br>.<br>.
  </div>
</div>

CSS

.scrollable-wrap {
  display: inline-block;
  border: 1px solid red;
  max-height: 100px;
  max-width: 400px;
  overflow: auto;
  padding: 10px;
}

.scrollable-content {
  display: inline-block !important;
  word-spacing: normal !important;
  outline: none;
}

JavaScript

OverlayScrollbars.defaultOptions({
	sizeAutoCapable: true,
	paddingAbsolute: true,
  scrollbars: {
  	visibility: 'visible',
    autoHide: 'never'
  }
});

/* - - - Demo code - - -*/
$('.destroy').on("click", function() {
	OverlayScrollbars( $('.scrollable-wrap'), {}).destroy();
});
$('.overlay-scrollbars').on("click", function() {
	$('.scrollable-wrap').overlayScrollbars({}); 
});