窗口大小调整上的Simplebar JS init和distroy

Question

使用https://github.com/Grsmto/simplebar/tree/master/packages/simplebar，我试图在(1px到1200 1px)之间设置一个自定义滚动条。当设备宽度大于1200 be时，它需要是普通滚动条。

我做我的代码。当我将窗口的大小从大窗口调整到小窗口大小时，效果很好，但当我从(小窗口大小调整到大窗口大小)调整窗口大小时，"Simplebar“不卸载。

​

$(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

调用unMount函数不会恢复默认的滚动条。

如果你想这样做，你可以：

• 从DOM中删除元素。
• 或者手动执行(在调用SimpleBar之前克隆元素)。

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

Answer 2

根据：库- SimpleBar

在元素上定义观察者

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

现在您可以移除观察者

// removes observer
myInstance.removeObserver();