javascript - 如何禁用微型滚动条 jQuery 插件？

Question

如何禁用页面上所有Tiny Scrollbar插件的实例？这是一个要测试的JSBin 。

上下文：我正在构建一个 Web 应用程序，该应用程序将这个插件用于桌面版本的所有 scollbars，但我想禁用它并为移动版本使用本机滚动条。

Answer 1

这个问题将帮助您检测它是否是移动浏览器，阅读有关警告的评论。

在 jQuery 中检测移动设备的最佳方法是什么？

Answer 2

尝试这个：

$(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();
     }
});

Answer 3

我发现这个页面正在寻找一种方法来销毁/完全删除一个 jquery 插件（特别是它是 tinyscrollbar）。所以关键字是有意义的，并且选择的答案可以满足操作的需要。但是这里没有关于“如何禁用 * jQuery 插件”的完整答案。

@yMed 两次被否决，但很接近..

最后，我在下面找到了我的答案..

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

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

哪个更好地解释在http://ub4.underblob.com/remove-jquery-plugin-instance/

Answer 4

看起来 Tiny Scrollbar 插件生成了自己的标记来模拟“本机”滚动条。

您可以做的是检测设备是否为移动设备，然后隐藏为滚动条生成的标记。你可以通过 jQuery 或 css 做到这一点。例如：

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

或者

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

为了在视口中显示本机浏览器滚动条，请将溢出设置为自动并指定高度。例如：

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

Answer 5

利用：

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

例子：

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