JQuery UI Selectable 插件：当 div 溢出时使滚动条不可选答案

【问题标题】：JQuery UI Selectable plugin: Make scroll bar not selectable when div overflowsJQuery UI Selectable 插件：当 div 溢出时使滚动条不可选
【发布时间】：2011-01-20 19:22:30
【问题描述】：

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

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

我可以使用选择器将滚动条添加到“取消”项目列表吗？或者有什么其他方法可以防止滚动条被选中？

这是我如何配置可选 div 的代码 sn-p：

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

理想情况下，我正在寻找可以添加到“取消”选项中的内容，以帮助跳过滚动条。

【问题讨论】：

这取决于您在 div 中的内容以及您如何获得 focus 操作。你能发布一些代码和更多的描述吗？
添加了代码。 “获得焦点”是什么意思？

标签： jquery jquery-ui

【解决方案1】：

天啊！解决方案很简单——添加另一个 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>

【讨论】：

澄清一下，“未设置为溢出”是指设置溢出：可见；
澄清一下，“未设置为溢出”意味着不设置溢出属性:) 它可以工作
解决方案有一个bug：滚动到底部后，项目不再可选择。