JQuery user interface and scroll bar

Question

I have a div with a div inside. External has overflow-y: auto; , therefore, with many internal elements, the right scroll bar appears. After executing $('#container').selectable(); when I press the left mouse button over the scroll bar, it does not scroll, but a dotted frame is displayed for selection.

I found this solution: JQuery UI Selectable Plugin: Make scrollbar inaccessible when div overflows

Unfortunately, this does not work for me, because when I scroll to the bottom, the elements are no longer available. (Although the top continues). So, the question arises: how to make the scrollbar ... mmm ... scroll, without breaking the container into 2 divs.

Answer 1

Use a div shell for this, its work is great 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, there seems to be a problem with all browsers: when you click on the scroll bar, the mouse event fires. This is a real problem, jQuery's user interface just doesn't solve the problem. Let's fix this on our own in the jQuery UI.js file (not applicable to the minimum version, since it must be confused by AFAIK).

Add this condition.

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

right after

 _mouseDown: function(event) { 

I saw a lot of these hacks with HasScrollbar() detectors, but I don’t understand why they just didn’t summarize the width of the client (i.e. without the scroll bar) and the offset to make it relative to the document and compare with pageX. It works great for me.