Jquery Can'；不要让jScrollPane和SelectBox插件一起工作

好的，我有两个插件正在使用，一个可以帮助制作精美的选择框下拉菜单，效果很好。插件：

然后我有一个这样我可以在元素上做一个自定义的滚动，这也很好。插件：

但是我不能让它们一起工作-一个带有自定义滚动条的下拉菜单

您可以在这里看到工作示例：

第一个框是一个没有滚动（正确）的框，第二个框是一个滚动正常工作的框，下面的一个是一个下拉框，我正在尝试让自定义滚动工作，但无法

不确定这是否与selectbox实例在应用自定义滚动之前必须准备就绪有关，也不确定如何检查是否准备就绪

正如您在JSFIDLE上看到的，我正在使用onDomReady并通过以下方式绑定它们：

//$(".pretty_sb").selectbox();
$('.cat_list').jScrollPane();
$(".pretty_sb").selectbox();
$('.sbOptions').jScrollPane();
//$('.sbHolder').jScrollPane();

编辑：

这似乎可行，但出于某种原因，它限制了下拉列表显示的高度：

$(".pretty_sb").selectbox({
    onOpen: function (inst) {
        $('.sbOptions').jScrollPane({
            verticalDragMinHeight: 40
        });
    }
});
//$('.sbOptions').jScrollPane();
$('.cat_list').jScrollPane();

编辑#2:我为

sbOptions

类设置了一个

min height

，这就是jScrollPane出于某种原因似乎采用的高度

解决方案0-重新初始化并销毁 工作小提琴：

测试日期：

• 铬v 31.0.1650.63米
• 火狐26.0
• IE10

解决方案1-延迟时重新初始化 工作小提琴：

以下内容将强制重新初始化滚动窗格，以更正高度。然而，这需要大量的开销。最终目标是按照中所述手动重新初始化

解决方案2-显式设置高度 工作小提琴：

以下内容似乎产生了所需的结果。在应用jScrollPane之前，我想到了强制设置高度

解决方案0-重新初始化并销毁 工作小提琴：

测试日期：

• 铬v 31.0.1650.63米
• 火狐26.0
• IE10

解决方案1-延迟时重新初始化 工作小提琴：

以下内容将强制重新初始化滚动窗格，以更正高度。然而，这需要大量的开销。最终目标是按照中所述手动重新初始化

解决方案2-显式设置高度 工作小提琴：

以下内容似乎产生了所需的结果。在应用jScrollPane之前，我想到了强制设置高度

测试和工作！ 我发现由于以下原因，

jquery.jscrollpane.js

插件有一个bug：

第一个原因： 在执行以下操作时

$(function(){

   $('.pretty_sb').selectbox();
   $('.sbOptions').jScrollPane();

});

第一行

（..）.selectbox（）

将自定义html

选择并在
DOM
中创建以下内容：

已测试并正常工作！
我发现由于以下原因，
jquery.jscrollpane.js
插件有一个bug：

第一个原因：
在执行以下操作时

$(function(){

   $('.pretty_sb').selectbox();
   $('.sbOptions').jScrollPane();

});

第一行
（..）.selectbox（）
将自定义html
选择并在
DOM
中创建以下内容：

最佳解决方案
真正的解决方案在于css，您必须为SelectBox菜单指定最大高度和高度：auto，以便jScrollPane正常工作。
以上所有解决方案都需要您在每次打开drop menu或在onOpen方法中设置menu（）的固定高度时重新初始化并销毁scrollpane，但如果菜单选项较少，您将在菜单中看到空白。
下面是一个理想的解决方案，它只需要jScrollPane初始化一次，而不需要重新初始化。
（这是一个干净的最佳代码）

CSS
/*ul上的这个类是jscrollpane正常工作所必需的，否则它的高度将不断降低*/

.sbOptions{
max-height:200px !important;
height:auto !important;
}

Js
在FF/Chrome/IE中测试此溶液
最佳溶液
真正的解决方案在于css，您必须为SelectBox菜单指定最大高度和高度：auto，以便jScrollPane正常工作。
以上所有解决方案都需要您在每次打开drop menu或在onOpen方法中设置menu（）的固定高度时重新初始化并销毁scrollpane，但如果菜单选项较少，您将在菜单中看到空白。
下面是一个理想的解决方案，它只需要jScrollPane初始化一次，而不需要重新初始化。
（这是一个干净的最佳代码）

CSS
/*ul上的这个类是jscrollpane正常工作所必需的，否则它的高度将不断降低*/

.sbOptions{
max-height:200px !important;
height:auto !important;
}

Js
在FF/Chrome/IE中测试了这个解决方案，jQuery Selectbox插件在JSFIDLE中抛出了一个错误。它使用了弃用的
live（）
函数。jQuery库应该是1.7.2吗？不，应该是1.10.1；我添加了
jquery migrate
，看看这是否有帮助。jquery Selectbox插件在jsfiddle中抛出了一个错误。它使用了弃用的
live（）
函数。jQuery库应该是1.7.2吗？不，应该是1.10.1；我添加了
jquery migrate
，看看这是否有帮助。我建议您提供一个全面的答案，但我认为对于最终的解决方案来说，这有点过头了。特别是考虑到这与我在您提交前30分钟发布的解决方案相同。是的，它们看起来非常相似，但我花了很多时间准备答案：-）我认为如果其他人能学到一些东西，这并不过分。我的观点不仅仅是要给出“答案”或可能的解决方案，我还想让OP知道发生了什么（正如他所要求的那样），因为如果他只是按照一个代码片段进行操作，他将无法回答自己为什么不能这样做：
$（'.sbOptions'）.jScrollPane（），一切正常。感谢您有深刻见解的回复。最后一个选项可能有效，但设置高度并不是我想做的事情，因为它将应用于许多不同的领域，有些是动态的；但是我会给你的其他解决方案看一看——但是我的JS知识不是很好（我建议你提供一个彻底的答案，但我认为这对于最后的回答有点过分
// TODO: Deal with where width/ height is 0 as it probably means the element is hidden and we should 
// come back to it later and check once it is unhidden...

$('.pretty_sb').selectbox({
    onOpen: function (inst) {
        $('.sbOptions').jScrollPane();
    }
});

/* Define a default global variable with some value for scrollable area height. */
var DEFAULT_SBHEIGHT = 150;

$(function(){

    $('.cat_list').jScrollPane();

    $('.pretty_sb').selectbox({
        onOpen: function (inst) {
            $('.sbOptions')
            .height(DEFAULT_SBHEIGHT)
            .jScrollPane();
        }
    });

}); 

.sbOptions{
max-height:200px !important;
height:auto !important;
}

$(".pretty_sb").selectbox();
$('.sbOptions').jScrollPane();