CODEWITHSUNDEEP
htmljquerycsssimplebar
Sojon
Sojon

Reputation: 129

Simplebar JS init and distroy on window-resize

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>

Upvotes: 0

Views: 2192

Answers (2)

Mohammad Mehdi Mohammadi
Mohammad Mehdi Mohammadi

Reputation: 75

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();

Upvotes: 1

Antonio Vida
Antonio Vida

Reputation: 862

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

Upvotes: 1

Related Questions