当窗口宽度等于 600px 时如何禁用 OverlayScrollbars？答案

【问题标题】：How to disable OverlayScrollbars when window width equal 600px?当窗口宽度等于 600px 时如何禁用 OverlayScrollbars？
【发布时间】：2021-06-14 19:59:43
【问题描述】：

我使用overlayScrollbars 创建一个<nav></nav>。

当窗口宽度小于 600px 时，导航栏像侧边栏一样向左移动。

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

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

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

现在当我的窗口宽度小于 600 像素时，overlayScrollbars 可以正常工作，但是当我的窗口宽度大于 600 像素时，overlayScrollbars 仍然可以工作并且元素宽度就像侧边栏。

当我的窗口宽度大于 600 像素时，如何禁用 overlayScrollbars()？

【问题讨论】：

也许是 instance.sleep();如果它大于 600px 和 instance.update() 如果它小于 600px

标签： javascript html jquery css vue.js

【解决方案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();
  }
});

【讨论】：

【解决方案2】：

你需要：

将叠加层实例存储为变量，以便您可以.destroy() 它们。
打开页面时检查窗口大小，根据大小创建。
将.destroy() 和新实例的重新创建附加到onresize 事件，与页面加载时进行相同的检查。

这是一个如何使用 jQuery 进行存储和销毁的示例。

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

【讨论】：

【解决方案3】：

您可以使用$(window).height(); $(window).width(); 检查页面的宽度和高度，然后使用基本的if else 功能启用或禁用内容。

【讨论】：

【解决方案4】：

使用媒体查询从任何屏幕隐藏元素！

试试看：

    <style>
      @media (min-width:600px){
        .yourOverlayElement{ display:none; }
      }
    </style>

【讨论】：