jQuery UI auswählbar und Bildlaufleiste

Question

Ich habe ein Div mit Divs innen. Der äußere hat , so dass bei vielen internen Elementen die rechte Bildlaufleiste erscheint. Nachdem ich $('#container').selectable(); getan habe, wenn ich die linke Maustaste über die Bildlaufleiste drücke, scrollt es nicht, aber ein gepunkteter Rahmen für die Auswahl wird angezeigt.

Ich habe diese Lösung gefunden: JQuery UI Selectable plugin: Make scroll bar not selectable when div overflows

Leider ist es nicht für mich arbeiten, denn wenn ich nach unten scrollen, werden die Elemente auswählbar stoppen. (Obwohl die oberen fortgesetzt werden). Also, die Frage ist: Wie mache ich die Bildlaufleiste ... mmm ... eine Bildlaufleiste, ohne den Container in 2 divs zu teilen.

Answer 1

Verwenden Sie ein Wrapper Div für dieses, es funktioniert gut für mich.

.selectable-wrapper { border-radius: 5px; min-height: 200px; max-height: 200px; overflow-y: auto; border: 1px solid #D1D1D1;} 
 

 
.selectable { list-style-type: none;padding: 5px;}

<div class="selectable-wrapper"> 
 
    <ul class="selectable"> 
 

 
    </ul> 
 
</div>

Answer 2

Nun, es scheint alles Browserproblem zu sein: wenn Sie auf eine Bildlaufleiste klicken, wird ein Mausereignis ausgelöst. Dies ist das echte Problem, jQuery UI löst es einfach nicht. Lassen Sie uns es in der jQuery-UI-.js-Datei selbst beheben (gilt nicht für die Min-Version, da es AFAIK verschleiern sollte).

diese Bedingung hinzufügen

direkt nach dem

_mouseDown: function(event) { 

ich viele solche Hacks mit HasScrollbar() Detektoren gesehen haben, aber nicht bekommen, warum sie oben nicht nur Client-Summe Breite (also ohne Scrollbalken) und Offset, um es relativ zum Dokument zu machen und mit pageX zu vergleichen. Für mich funktioniert es perfekt.