完美滚动条不能正确应用于 jQuery UI 选择菜单

Question

我正在尝试添加完美的scrollbar插件(它给出了一个漂亮的滚动条而不是浏览器默认的滚动条)到jQuery UI selectmenu

这是JSFIDDLE

当我打开selectmenu滚动条不显示(即使我悬停列表)，直到我得到鼠标接近底部的列表(这意味着:你第一次打开选择菜单它给人的感觉，没有其他项目，因为滚动条不存在)

你知道怎么解决这个问题吗?

HTML

<select name="number" id="number">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
</select>

JS

$(function(){    
    $( "#number" ).selectmenu().selectmenu( "menuWidget" ).addClass( "overflow" ).perfectScrollbar();
});

CSS

#number{
    width: 220px;
}
.overflow{
    height: 200px;
    position: relative;
}

Answer 1

我的问题的答案是:根据我的理解，我们应用perfectscrollbar的元素应该有一个明确的高度(100%或400px等等)这没关系，我已经添加了一个类overflow它可以为列表添加高度

$( "#number" ).selectmenu().selectmenu( "menuWidget" ).addClass( "overflow" )

然后我将perfectScrollbar()函数应用于列表但它仍然是隐藏的，这就是问题所在

jQuery不能计算一个元素的高度，如果它是隐藏(即使它有一个height css属性集)

在查看了jQuery ui selectmenu文档之后，我能够找到一个打开事件，我们可以使用它在列表打开时做一些事情

$( "#number" ).selectmenu({
    open: function( event, ui ) {
      $( "#number" ).selectmenu( "menuWidget" ).addClass( "overflow" ).perfectScrollbar();
    }
})

代码所做的很简单，它只在列表打开并且jQuery能够读取高度

之后才应用perfectScroll()方法。

我希望这对有同样情况的人有帮助。