当窗口宽度等于600px时，如何禁用覆盖滚动条？

Question

我使用overlayScrollbars创建一个

。

当窗口宽度小于600px时，则navbar像边栏一样左转。

    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
    </ul>

创建一个js文件并添加这一行：

$('ul').overlayScrollbars({ });

现在，当我的widnow宽度小于600px时，overlayscrollbar工作很好，但是当我的窗口宽度大于600px时，overlayscrollbar仍然工作，元素宽度就像侧边栏一样。

当窗口宽度大于600px时，如何禁用overlayScrollbars（）？

Answer 1

HTML

<ul id="test">
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
</ul>

jQuery

So you get it onload
--------------------

if($(window).width() < 600) {
    var instance = OverlayScrollbars(document.getElementById("test"), {});
}

$(window).resize(function() {
  var instance = OverlayScrollbars(document.getElementById("test"), {});
  if ($(window).width() > 600) {
    instance.destroy();
  }
});

Answer 2

您需要：

1. 将覆盖实例存储为变量，以便您可以.destroy()它们。
2. 打开页面时检查窗口大小，并根据大小创建窗口。
3. 将.destroy()和重新创建新实例附加到onResize事件，检查方式与加载页面时相同。

下面是一个如何使用jQuery存储和销毁的示例。

//initializes plugin and stores the instance into a variable
var instance = $('ul').overlayScrollbars({ }).overlayScrollbars();
instance.destroy();