选择的 jquery 插件中的垂直滚动问题答案

【问题标题】：Vertical scrolling issue in Chosen jquery plugin选择的 jquery 插件中的垂直滚动问题
【发布时间】：2015-03-05 20:31:58
【问题描述】：

转到链接 -> jsfiddle。
单击垂直滚动条的向下箭头。将显示选项（选项 11 将突出显示，垂直滚动条将位于底部）
不要点击垂直滚动条的向上箭头。（不要使用鼠标滚轮滚动）

向上 1 级后滚动停止。选项 1 到 4 不可见。（用鼠标向上拖动滚动条）

知道发生了什么吗？与用于添加垂直滚动的 css 有什么关系？

谢谢！

HTML

<select id="html-multi-chosen-select" multiple="multiple">
    <option selected='selected' value="Options 1">Options 1</option>
    <option selected='selected' value="Options 2">Options 2</option>
    <option selected='selected' value="Options 3">Options 3</option>
    <option selected='selected' value="Options 4">Options 4</option>
    <option selected='selected' value="Options 5">Options 5</option>
    <option selected='selected' value="Options 6">Options 6</option>
    <option selected='selected' value="Options 7">Options 7</option>
    <option selected='selected' value="Options 8">Options 8</option>
    <option selected='selected' value="Options 9">Options 9</option>
    <option selected='selected' value="Options 10">Options 10</option>
    <option value="Options 11">Options 11</option>
    <option value="Options 12">Options 12</option>
    <option value="Options 13">Options 13</option>
    <option value="Options 14">Options 14</option>
    <option value="Options 15">Options 15</option>
</select>

$('#html-multi-chosen-select').chosen({ width: "210px" });

添加垂直滚动的CSS：

#html_multi_chosen_select_chosen ul.chosen-choices{
    max-height:80px;
    overflow: auto;
}

【问题讨论】：

你找到解决这个问题的方法了吗？

标签： css jquery-chosen

【解决方案1】：

这对我有用

<style>
    #myChosenID_chosen .chosen-choices{
        max-height:80px;
        overflow: auto;
    }
</style>

【讨论】：

【解决方案2】：

我也有同样的问题。这是所选插件使用 mousedown/mouseup javascript 事件的结果，即使在滚动条单击时也会触发。

为了解决这个问题，我不得不破解 selected.jquery.js (v1.51) 源代码。

在所选插件的第 672 到 677 行，您可以找到该插件将其所有 mousedown/mouse up 事件绑定的位置：

 this.container.bind('mousedown.chosen', function(evt) {
   _this.container_mousedown(evt);
 });
this.container.bind('mouseup.chosen', function(evt) {
  _this.container_mouseup(evt);
});

为了防止滚动条点击冒泡，我将这些行替换为：

this.container.bind('click.chosen', function(evt) {
  _this.container_mousedown(evt);
  _this.container_mouseup(evt);
});

请注意，这个 hack 完全未经测试，可能会产生一些无法预料的后果，但它现在似乎对我有用。

另外请注意，我还没有在任何移动平台上尝试过。

使用风险自负......

【讨论】：