Vertical scrolling issue in Chosen jquery plugin

问题

Go to link -> jsfiddle.
Click on the down arrow of vertical scrollbar. The options will be displayed (Options 11 will be highlighted and vertical scrollbar will be at the bottom)
No click on the up arrow of vertical scrollbar. (Do not use mouse wheel scrolling)

The scrolling stops after going 1 level up. Options 1 to 4 are not visible. (dragging up the scrollbar with mouse works)

Any idea what is happening? Anything to do with the css used to add vertical scrolling?

Thanks!

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 to add vertical scroll:

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

回答1:

I had this same issue. It is a result of the chosen plugin using mousedown/mouseup javascript events, which trigger even on a scrollbar click.

To fix the issue I had to hack the chosen.jquery.js (v1.51) source.

On lines 672 to 677 of the chosen plugin, you can find where the plugin binds all its mousedown/mouse up events:

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

To prevent the scrollbar click from bubbling I replaced these lines with:

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

Note that this hack is totally untested, and may have some unforeseen consequences, but it seems to be working for me for now.

Also note that I have not tried out this on any mobile platform.

Use at your own risk....

回答2:

This work for me

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

来源：https://stackoverflow.com/questions/28887166/vertical-scrolling-issue-in-chosen-jquery-plugin

标签

css

jquery-chosen