Question

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

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

不幸的是，它对我不起作用，因为当我滚动到底部时，项目停止可选。（虽然最重要的是继续）。所以，问题是：如何使滚动条... mmm ...滚动条，而不将容器分成2个div 。

Answer 1

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

添加此条件

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

之后

_mouseDown: function(event) {

我已经看到很多这样的hack HasScrollbar()探测器，但是不明白为什么它们不只是总结客户端宽度（没有滚动条）和偏移量使其相对于文档和与pageX比较。对我而言，它完美无缺。

Answer 2

为此使用包装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>

jQuery UI可选和滚动条

2 个答案: