JQuery UI Plugin sélectionnable: Rendre la barre de défilement non sélectionnable lorsque div déborde

Question

J'ai un div qui est réglé sur overflow: auto;. Ce contenu de cette div est sélectionnable (en utilisant l'interface utilisateur jQuery).

Lorsque le div déborde et qu'une barre de défilement apparaît, la barre de défilement elle-même devient sélectionnable, ce qui fait que le défilement ne fonctionne pas correctement. En FF/Chrome, je peux faire défiler la div mais j'obtiens le contour sélectionnable. Dans Safari, la barre de défilement ne s'engage pas du tout puisque le clic est sélectionné par le gestionnaire de sélection.

Y a-t-il un sélecteur que je peux utiliser pour ajouter la barre de défilement à la liste des éléments 'annuler'? Ou tout autre moyen d'empêcher la barre de défilement d'être sélectionnable?

Voici un extrait de code de la façon dont je configuration ma div sélectionnable:

$(".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); 
    } 
}); 

Mon HTML ressemble à:

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

Idéalement, je suis à la recherche de quelque chose que je peux ajouter à l'option 'cancel' qui permet d'ignorer la barre de défilement.

Answer 1

D'oh! La solution était simple - ajouter une autre div et ne pas avoir son ensemble de débordement. Ainsi, le code html devient:

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