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="unstable-parent">
  <textarea class="scrollable-wrap" wrap="off" rows="1" cols="1">
  Phasellus porta metus sapien, nec Cras eu viverra velit.
  Suspendisse.
  .
  .
  .
  .
  .
  .
  .
  </textarea>
</div>

CSS

.unstable-parent {
  resize: both;
  overflow: auto;
  padding: 20px;
  background: #e1e1e1;
  float: left;
}

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

.scrollable-content {
  outline: none;
}

JavaScript

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

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