0

我正在尝试将完美滚动条插件（它提供漂亮的滚动条而不是浏览器默认滚动条）添加到 jQuery UIselectmenu

这是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;
}
4

1 回答 1

0

我的问题的答案是：据我所知，我们应用完美滚动条的元素应该有一个明确的高度（100% 或 400px 或其他），没关系，我已经添加了一个类溢出，它将高度添加到列表中

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

代码的作用很简单，它perfectScroll()仅在打开列表并且 jQuery 能够读取高度后应用该方法

我希望这对处于相同情况的人有所帮助。

于 2015-07-10T13:26:18.327 回答