jQuery UI selectable and scrollbar

Question

I have a div with divs inside. The outer one has overflow-y: auto;, so with many internal items the right scrollbar appears. After doing $('#container').selectable(); when I press left mouse button over the scrollbar, it doesn't scroll, but a dotted frame for selecting is shown.

I have found this solution: JQuery UI Selectable plugin: Make scroll bar not selectable when div overflows

Unfortunately, it doesn't work for me, because when I scroll to the bottom, the items stop being selectable. (Though the top ones continue). So, the question is: how make the scrollbar... mmm... a scrolling bar, without splitting the container into 2 divs.

Answer 1

Use a wrapper div for this , Its working fine for me.

.selectable-wrapper {  border-radius: 5px; min-height: 200px;  max-height: 200px;  overflow-y: auto; border: 1px solid #D1D1D1;}

.selectable { list-style-type: none;padding: 5px;}

<div class="selectable-wrapper">
  <ul class="selectable">

  </ul>
</div>

Answer 2

Well, it seems to be all browsers problem: when you click on a scrollbar, a mouse event is fired. This is the real problem, jQuery UI just doesn't solve it. Let's fix it on our own in the jQuery UI .js file (not applied to the min version as it should be obfuscated AFAIK).

Add this condition

if (event.pageX > $(event.target)[0].clientWidth + $(event.target).offset().left)
    return;

right after the

_mouseDown: function(event) {

I have seen a lot of such hacks with HasScrollbar() detectors, but don't get why didn't they just sum up client width (that is without scrollbar) and offset to make it relative to the document and compare with pageX. For me it works perfectly.