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

Question

使用Simplebar JS插件我试图在(1px到1200px(之间设置一个自定义滚动条。当设备宽度大于1200px时，它需要是正常的滚动条。

我做我的代码。当我从(大窗口大小到小窗口大小(调整窗口大小时，它工作得很好，但当我从(小窗口大小到大窗口大小(调整窗口大小时；单杠"；而不是卸载。

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

根据：Library–SimpleBar

你在元素上定义了你的观察者

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

现在你可以移除观察器

// removes observer
myInstance.removeObserver();