7

我有一个里面有 div 的 div。外面的有overflow-y: auto;，所以有很多内部项目，右边的滚动条就会出现。当$('#container').selectable();我在滚动条上按鼠标左键后，它不会滚动，但会显示一个用于选择的虚线框。

我找到了这个解决方案：JQuery UI Selectable plugin: Make scroll bar not selectable when div overflows

不幸的是，它对我不起作用，因为当我滚动到底部时，这些项目不再可选择。（虽然顶级的继续）。所以，问题是：如何使滚动条......嗯......滚动条，而不将容器分成2个 divs。

4

2 回答 2

7

好吧，这似乎是所有浏览器的问题：当您单击滚动条时，会触发鼠标事件。这是真正的问题，jQuery UI 并没有解决它。让我们在 jQuery UI .js 文件中自己修复它（不适用于最小版本，因为它应该被 AFAIK 混淆）。

添加这个条件

if (event.pageX > $(event.target)[0].clientWidth + $(event.target).offset().left)
    return;

紧接着

_mouseDown: function(event) {

我已经看到很多这样的HasScrollbar()检测器黑客攻击，但不明白为什么他们不只是总结客户端宽度（即没有滚动条）和偏移量以使其相对于文档并与 pageX 进行比较。对我来说，它完美无缺。

于 2013-12-25T17:25:23.730 回答
1

为此使用包装器 div，它对我来说工作正常。

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

于 2016-05-26T08:29:47.327 回答