Simplebar JS init and distroy on window-resize

Question

Using Simplebar JS plugin I'm trying to set a custom scrollbar between (1px to 1200px). When the device width larger then 1200px then it's need to be normal scrollbar.

I do my code. It's works fine when I resize-window from (large-window-size to small-window-size) but I when I resize-window from (small-window-size to large-window-size) then "Simplebar" not unMount'ing.

$(window).resize(function() {
  if (window.matchMedia("(max-width: 1200px)").matches) {
    new SimpleBar($('#myEl')[0]);
  }
  if (window.matchMedia("(min-width: 1200px)").matches) {
    new SimpleBar($('#myEl')[0]).unMount();
  }
});

.myEl {
  height: 200px;
  width: 200px;
  overflow: hidden;
  overflow-y: auto;
  background: yellow;
}

<link href="https://unpkg.com/simplebar@latest/dist/simplebar.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>


<div id="myEl" class="myEl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam vero, magni expedita illum consequuntur sed facilis, modi voluptatibus soluta eum omnis? Sed voluptates qui harum optio facere dolores ex necessitatibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam vero, magni expedita illum consequuntur sed facilis, modi voluptatibus soluta eum omnis? Sed voluptates qui harum optio facere dolores ex necessitatibus?</div>

Answer 1

Calling unMount function don't restore the default scrollbar.

If you want to do that you can:

• Remove the element from the DOM.
• Or do it manually (cloning the element before SimpleBar is called).

https://www.npmjs.com/package/simplebar#unmountdestroy

Answer 2

According to: Library – SimpleBar

you define your observer on an element

myInstance = new SimpleBar(document.getElementById('demo'), {
// options here
})

now you can remove the observer

// removes observer
myInstance.removeObserver();