时间戳

首页 > 解决方案 > Simplebar JS init 和 distroy on window-resize

html - Simplebar JS init 和 distroy on window-resize

问题描述

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

我做我的代码。当我从（大窗口大小到小窗口大小）调整窗口大小时它工作正常，但是当我从（小窗口大小到大窗口大小）调整窗口大小时，然后“Simplebar”不卸载' 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>

标签： htmljquerycsssimplebar

解决方案

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

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

  • 从 DOM 中移除元素。
  • 或者手动执行（在调用 SimpleBar 之前克隆元素）。

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

推荐阅读