Проблема вертикальной прокрутки в плагине Chosen jquery

Question

1. Перейти по ссылке -> jsfiddle.
2. Нажмите на стрелку вниз вертикальной полосы прокрутки. Отобразятся параметры (параметры 11 будут выделены, а вертикальная полоса прокрутки будет внизу)
3. Не нажимайте на стрелку вверх вертикальной полосы прокрутки. (Не используйте прокрутку колесика мыши)

Прокрутка останавливается после перехода на 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>

JS

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

CSS, чтобы добавить вертикальную прокрутку:

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

Answer 1

Это работа для меня

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

Answer 2

У меня была такая же проблема. Это результат выбранного плагина, использующего события javascript mousedown/mouseup, которые срабатывают даже при щелчке полосы прокрутки.

Чтобы решить эту проблему, мне пришлось взломать исходный код 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);
});

Обратите внимание, что этот хак полностью не проверен и может иметь некоторые непредвиденные последствия, но, похоже, пока он работает для меня.

Также обратите внимание, что я не испытывал это ни на одной мобильной платформе.

Используйте на свой риск....