How to disable tiny scrollbar jQuery plugin?

Question

How do I disable all instances of the Tiny Scrollbar plugin on a page? Here's a JSBin to test.

Context: I'm building a web application that uses this plugin for all the scollbars for the desktop version, but I want to disable it and use native scrollbars for the mobile version.

Do this: $('#scrollbar1').tinyscrollbar(); only if its not a mobile browser. — Poornima, Dec 13 '13 at 21:06
Take a look at https://github.com/borismus/device.js for ways of loading scripts/executing code based on media queries. — megawac, Dec 13 '13 at 21:20

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

This question will help you to detect if it is a mobile browser, read the comments though about the caveats.

What is the best way to detect a mobile device in jQuery?

edited May 23 '17 at 12:08

Community

1
1

answered Dec 13 '13 at 21:03

Mark

3,083
4
16
31

I will be using media queries for now (I also want to disable the scrollbar plugin on the desktop when resizing the browser window to trigger the mobile layout). – Diego R Dec 13 '13 at 21:10
@DiegoR You could use some custom width detection of the window / viewport to turn off your plugin. You can also get into the `@media screen and (max-width: 1000px){` to change the layout dynamically. Depending on how you are serving your site as well you can possibly alternate a different page specifically for mobile browsers. If you are testing on a local browser you need to do more the re size your browser and get into a user agent swapping. – Mark Dec 13 '13 at 21:20

score 0 · Accepted Answer · answered Dec 13 '13 at 21:08

Try this:

$(document).ready(function(){
     if(!(navigator.userAgent.match(/Android/i)
     || navigator.userAgent.match(/webOS/i)
     || navigator.userAgent.match(/iPhone/i)
     || navigator.userAgent.match(/iPad/i)
     || navigator.userAgent.match(/iPod/i)
     || navigator.userAgent.match(/BlackBerry/i)
     || navigator.userAgent.match(/Windows Phone/i)
     )){
         $('#scrollbar1').tinyscrollbar();
     }
});

score 0 · Answer 3 · answered Jan 02 '15 at 01:34

I found this page looking for a way to destroy / completely remove a jquery plugin (specifically it was tinyscrollbar). So the keywords make sense, and the selected answer does what the op wanted. But there are no complete answers here on "How To Disable a * jQuery Plugin".

@yMed was down voted twice, but was close..

In the end, I found my answer below..

var destroyTinyScrollBar = function($elem) {
    var eventNamespace = 'tinyscrollbar',
        isInstantiated  = !! $.data($elem.get(0));

    if (isInstantiated) {
        $.removeData($elem.get(0));
        $elem.off(eventNamespace);
        $elem.unbind('.' + eventNamespace);
    }
};

Which is better explained over at, http://ub4.underblob.com/remove-jquery-plugin-instance/

score -1 · Answer 4 · answered Dec 13 '13 at 21:11

It looks like the Tiny Scrollbar plugin generates its own markup to simulate a "native" scroll bar.

What you can do is detect whether the detect if the device is mobile, then hide the generated markup for the scrollbar. You can do that via jQuery or css. For example:

$('#scroll-bar').hide();

or

<div id="scroll-bar" style="display:none;">...

In order to display native browser scrollbars in for the viewport, set overflow to auto and specify a height. For example:

<div id="view-port" style="height:200px; overflow:auto;">...

Hiding the scrollbar and setting the overflow won't fix this. What about all the event listeners tinyscrollbar has set, they will still be triggered when events are dispatched. — NaNpx, Dec 13 '13 at 21:22

score -3 · Answer 5 · answered Dec 13 '13 at 21:08

-3

use:

$(selector).unbind("tinyscrollbar");

example:

$("#parent").unbind("tinyscrollbar");

answered Dec 13 '13 at 21:08

yMed

65
4

1

tinyscrollbar isn't an event, it's a plugin. – NaNpx Dec 13 '13 at 21:10

How to disable tiny scrollbar jQuery plugin?

5 Answers5