title: JQuery UI Selectable plugin: Make scroll bar not selectable when div overflows
body: <p>I have a div that's set to <code>overflow: auto;</code>. This contents of this div are selectable (using jQuery UI).</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>Here's a code snippet of how I'm configuring my selectable div:</p>
  
  <pre><code>$(".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);
      }
  });
  </code></pre>
  
  <p>My HTML looks like:</p>
  
  <pre><code>&lt;div class="mySelectable"&gt; &lt;!-- set to auto overflow --&gt;
      &lt;div class="myButton"&gt;I can't be selected&lt;/div&gt;
      &lt;div class="rowSelectable"&gt;I am a selectable row&lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Ideally, I'm looking for something that I can add to the 'cancel' option which helps skip the scroll bar.</p>