slimScroll with select element scrolling issue

Question

I have a div to which slimscroll is applied This div contains a <select> tag with long list

This is my current scenario

<div id="scrollablediv">
  Some text
  .
  .
  <select>
    <option>1</option>
    <option>2</option>
   . . .
  </select>

</div>

Now the problem is when I try to scroll the inside the <select> options whole div get scrolled and not allowing me to scroll thorough the dropdown of select tag...

How to get rid of this problem

Answer 1

I had the same issue than you. It seems that the select menu was firing a touchmove event which was intercepted by slimScroll (thus starting scroll).

The (crappy) fix was to bind touchmove event of the select element to a function returning false (in order to stop propagation). At least it worked.

Answer 2

Thanks to David who already answered this question! I changed it a little.

/*$('.ui-autocomplete.ui-widget-content') - it's a scrolling ul-list*/
$('.ui-autocomplete.ui-widget-content').on('touchmove', function(event) {
    event.stopPropagation();
});