当 window 宽度等于 600px 时如何禁用 OverlayScrollbars？

Question

I use overlayScrollbars to create a <nav></nav> .

When window width less than 600px, then navbar go left like sidebar.

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

and create a js file and add this line:

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

now when my widnow width less than 600px, overlayScrollbars worke fine but when my window width bigger than 600px, overlayScrollbars still work and element width is like sidebar.

How can I disable overlayScrollbars() when my window width bigger than 600px?

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

You can use the $(window).height(); $(window).width(); $(window).height(); $(window).width(); to check the width and height of page and then enable or disable stuffs with a basic if else function.

Answer 3

You need to:

1. Store the overlay instances as variables, so you can .destroy() them.
2. Check the window size when the page is opened, and create it depending on size.
3. Attach .destroy() and recreation of new instances to an onresize event, with the same check as when the page loads.

Here's an example of how to store and destroy with jQuery.

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

Answer 4

Use Media Query to hide elements from any screen!

Try it:

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