Question

我正在尝试将perfect-scrollbar插件（它提供一个漂亮的滚动条而不是浏览器默认滚动条）添加到jQuery UI selectmenu

当我打开selectmenu时，滚动条不会显示（即使我将鼠标悬停在列表中），直到我将鼠标靠近列表底部（这意味着：第一次打开时） 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

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

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

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

如果元素隐藏（即使它具有高度 css属性集），jQuery也无法计算元素的高度

所以在查看 jQuery ui selectmenu文档之后，我能够找到一个open事件，我们可以在列表打开时用来做某事

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

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

我希望这可以帮助处于相同情况的人。

完美滚动条不能正确应用于jQuery ui selectmenu

1 个答案: