JQuery UI Selectable plugin: make scroll bar not selectable when div overflows

Question

I have a div that's set to overflow: auto;. This contents of this div are selectable (using jQuery UI).

When the div overflows and a scrollbar appears, the scrollbar itself becomes selectable so scrolling doesn't work well. In FF/Chrome, I can scroll the div but I get the selectable outline. In Safari, the scroll bar won't engage at all since the click is picked up by selectable's handler.

Is there a selector I can use to add the scrollbar to the 'cancel' items list? Or any other way to prevent the scroll bar from being selectable?

Here's a code snippet of how I'm configuring my selectable div:

        $(".mySelectable").selectable( {

            cancel: '.myButton, .notSelectable',
            filter: '.rowSelectable',
            selecting: function(event, ui){
                handleSelection(ui.selecting);
            },
            selected: function(event, ui) {
                handleSelected(ui.selected);
            },
            unselected: function(event, ui) {
                handleUnselected(ui.unselected);
            }
        });

My HTML looks like:

        <div class="mySelectable"> <!-- set to auto overflow -->
            <div class="myButton">I can't be selected</div>
            <div class="rowSelectable">I am a selectable row</div>
            ...
        </div>

Ideally, I'm looking for something that I can add to the 'cancel' option which helps skip the scroll bar.

Answer 1

D'oh! Solution was simple -- add another div and not have it's overflow set. So, the html becomes:

    <div class="wrapperDiv"> <!-- set to auto overflow -->
        <div class="mySelectable"> <!-- NOT set to overflow -->
            <div class="myButton">I can't be selected</div>
            <div class="rowSelectable">I am a selectable row</div>
            ...
        </div>
    </div>