Interfaccia utente JQuery Plugin selezionabile: la barra di scorrimento non è selezionabile quando div overflow

Question

Ho un div che è impostato su overflow: auto;. Questo contenuto di questo div è selezionabile (usando l'interfaccia utente di jQuery).

Quando compaiono il div overflow e una barra di scorrimento, la barra di scorrimento diventa selezionabile in modo che lo scorrimento non funzioni correttamente. In FF/Chrome, posso scorrere il div ma ottengo il contorno selezionabile. In Safari, la barra di scorrimento non si impegna affatto poiché il clic viene prelevato dal gestore selezionabile.

Esiste un selettore che è possibile utilizzare per aggiungere la barra di scorrimento all'elenco "Annulla" delle voci? O un altro modo per impedire che la barra di scorrimento sia selezionabile?

Ecco un frammento di codice di come sto configurando il mio selezionabile 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); 
    } 
}); 

mio HTML assomiglia:

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

Idealmente, sto cercando qualcosa che posso aggiungere a l'opzione 'cancella' che aiuta a saltare la barra di scorrimento.

Answer 1

D'oh! La soluzione era semplice: aggiungi un altro div e non hai il set di overflow. Così, il codice HTML diventa:

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