How to destroy() Optiscroll?

[Overpowered]

First, thx 4 your great plugin!
Secondly, how can I destroy() it on the jQuery way?

For Example, I initialize it like this:

$(document).ready(function (){
    scrollbar();
});

function scrollbar(){
    $('.box').optiscroll();
}

And try to destroy it like this (not working):

$(document).ready(function (){
    if ($('body').outerWidth() <= 800 ) {
       scrollbar.destroy();
    }
});

Whats my fail?

[albertogasparin]

You have to call destroy on the Optiscroll instance, not on the function that creates it. You can get it by using data('optiscroll') on the element that has Optiscroll:

$(document).ready(function (){
    if ($('body').outerWidth() <= 800 ) {
       $('.box').data('optiscroll').destroy();
    }
});

[Overpowered]

Thx for your fast support - works perfect!

[Overpowered]

Sry, its me again,
after .destroy() I cant reinitialize the optiscroll plugin. For example I tried:

$(document).ready(function (){
    if ($('body').outerWidth() > 800 ) {
       $('.box').optiscroll();
    }
});

I also tried $('.box').data('optiscroll').init(); that works, but then I get an error (at lower 800 and scroll) from your plugin:

"TypeError: t is null - jquery.optiscroll.min:1:1599"

[albertogasparin]

Oh, my bad, it is better to use a different way for destroying it:

$(document).ready(function (){
    if ($('body').outerWidth() <= 800 ) {
       $('#app').optiscroll('destroy');
    }
});

The main difference is that this way Optiscroll handles the reference stored by jQuery, cleaning it properly. Then you can re-initialise it by calling $('.box').optiscroll(); without problems.

[albertogasparin]

I've updated the readme to add the example of destroy so people won't get confused anymore

[Overpowered]

No problem, thx again!

Now I think "I found a Bug". The best way to reconstruct it is the following one. Switch "$(document).ready()" to "$(document).resize()"

$(document).resize(function (){
    if ($('body').outerWidth() <= 800 ) {
       $('#app').optiscroll('destroy');
    }
});

Now under 800 the script (or the #app div) starts flickering. It seemes to be that under 800 the script starts switching the class between "optiscroll" and "optiscroll is-enabled has-vtrack" on every pixel change. Same problem with "$(document).ready()". On some resolutions under 800 the Optiscroll is visible, on some not.

You see what I mean?

[albertogasparin]

Oh well, yeah, the code is not meant to be called multiple times like that. What happens is that calling .optiscroll(...) will create a new instance if there is not one already, regardless of the fact that you want to call the method destroy.

So, you have to store in a variable the status of optiscroll (or check if an optiscroll instance is there), in order to call .optiscroll('destroy') only when needed.

Something like:

var isOptiscrollEnabled;
$(document).resize(function (){
    if ($('body').outerWidth() <= 800) {
       if (isOptiscrollEnabled) {
          $('#app').optiscroll('destroy');
          isOptiscrollEnabled = false;
       }
    } else {
       if (!isOptiscrollEnabled) {
           $('#app').optiscroll();
           isOptiscrollEnabled = true;
       }
    }
});

Or you can check for the presence of $('#app').data('optiscroll') before calling destroy.

[Overpowered]

Thx again for your great support! Works perfect now.