JQuery UI可选插件:当div溢出时,滚动条不可选 [英] JQuery UI Selectable plugin: Make scroll bar not selectable when div overflows
问题描述
我有一个div设置为 overflow:auto;
。这个div的内容是可选择的(使用jQuery UI)。
I have a div that's set to overflow: auto;
. This contents of this div are selectable (using jQuery UI).
当div溢出并出现滚动条时,滚动条本身变得可选,因此滚动效果不佳。在FF / Chrome中,我可以滚动div但是我得到了可选择的轮廓。在Safari中,滚动条根本不会参与,因为可选择的处理程序会选择点击。
When the div overflows and a scrollbar appears, the scrollbar itself becomes selectable so scrolling doesn't work well. In FF/Chrome, I can scroll the div but I get the selectable outline. In Safari, the scroll bar won't engage at all since the click is picked up by selectable's handler.
我是否可以使用选择器将滚动条添加到'取消'项目清单?或者其他任何阻止滚动条可供选择的方法?
Is there a selector I can use to add the scrollbar to the 'cancel' items list? Or any other way to prevent the scroll bar from being selectable?
这是我如何配置可选div的代码片段:
Here's a code snippet of how I'm configuring my selectable 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看起来像:
My HTML looks like:
<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>
理想情况下,我正在寻找可以添加到'cancel'选项的内容,这有助于跳过滚动条。
Ideally, I'm looking for something that I can add to the 'cancel' option which helps skip the scroll bar.
推荐答案
D'哦!解决方案很简单 - 添加另一个div而不是它的溢出设置。
因此,html变为:
D'oh! Solution was simple -- add another div and not have it's overflow set. So, the html becomes:
<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>
这篇关于JQuery UI可选插件:当div溢出时,滚动条不可选的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!