JQuery UI可选插件:当div溢出时,滚动条不可选

Question

我有一个div设置为overflow: auto;.这个div的内容是可选择的(使用jQuery UI).

当div溢出并出现滚动条时,滚动条本身变为可选,因此滚动效果不佳.在FF/Chrome中,我可以滚动div但是我得到了可选择的轮廓.在Safari中,滚动条根本不会参与,因为可选择的处理程序会选择点击.

我可以使用选择器将滚动条添加到"取消"项目列表中吗？或任何其他方式来阻止滚动条可选？

这是我如何配置可选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);
    }
});

我的HTML看起来像:

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

理想情况下,我正在寻找可以添加到"取消"选项的内容,这有助于跳过滚动条.

Answer 1

D'哦!解决方案很简单 - 添加另一个div而不是它的溢出设置.所以,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>