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.

Corposant

That depends on what you have inside of the div and how you're getting the focus actions. Can you post some code and a little more description? – Kellie

Added code. What do you mean by "getting the focus"? – Corposant

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>

Corposant

To clarify, "not set to overflow" means set overflow: visible; – Retire

To clarify, "not set to overflow" means Not to set overflow property :) and it works – Staves

The solution has a bug: after scrolling to the bottom the items stop being selectable. – Stockdale