JQuery UI Complemento seleccionable: hacer que la barra de desplazamiento no se pueda seleccionar cuando div se desborda

Question

Tengo un div establecido en overflow: auto;. Este contenido de este div se puede seleccionar (usando jQuery UI).

Cuando el div se desborda y aparece una barra de desplazamiento, la barra de desplazamiento se puede seleccionar, por lo que el desplazamiento no funciona bien. En FF/Chrome, puedo desplazar el div pero obtengo el contorno seleccionable. En Safari, la barra de desplazamiento no se activará en absoluto ya que el controlador seleccionable selecciona el clic.

¿Hay un selector que pueda usar para agregar la barra de desplazamiento a la lista de elementos 'cancelar'? ¿O de otra forma para evitar que la barra de desplazamiento sea seleccionable?

He aquí un fragmento de código de cómo estoy configurando mi seleccionable 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); 
    } 
}); 

Mi HTML se parece a:

<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> 

Lo ideal es que estoy buscando algo que puedo añadir a la opción 'cancelar' que ayuda a omitir la barra de desplazamiento.

Answer 1

D'oh! La solución fue simple: agregue otro div y no tenga su conjunto de desbordamiento. Por lo tanto, se convierte en el html:

<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>