Question

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

向上升级后滚动停止。选项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>

JS

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

添加垂直滚动的CSS：

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

Answer 1

我有同样的问题。这是所选插件使用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完全没有经过测试，可能会产生一些不可预见的后果，但它现在似乎对我有用。

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

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

Answer 2

这项工作对我来说

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

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

2 个答案: